1.這裏使用element中的列子
<el-table :data="tableData" style="width: 100%" :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="expandSelect">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="商品名稱">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="所屬店鋪">
<span>{{ props.row.shop }}</span>
</el-form-item>
<el-form-item label="商品 ID">
<span>{{ props.row.id }}</span>
</el-form-item>
<el-form-item label="店鋪 ID">
<span>{{ props.row.shopId }}</span>
</el-form-item>
<el-form-item label="商品分類">
<span>{{ props.row.category }}</span>
</el-form-item>
<el-form-item label="店鋪地址">
<span>{{ props.row.address }}</span>
</el-form-item>
<el-form-item label="商品描述">
<span>{{ props.row.desc }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="商品 ID"
prop="id">
</el-table-column>
<el-table-column
label="商品名稱"
prop="name">
</el-table-column>
<el-table-column
label="描述"
prop="desc">
</el-table-column>
</el-table>
2.定義data中的元素
data(){
return{
tableData: [{
id: '12987122',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優質淡奶，奶香濃而不膩',
address: '上海市普陀區真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優質淡奶，奶香濃而不膩',
address: '上海市普陀區真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優質淡奶，奶香濃而不膩',
address: '上海市普陀區真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987126',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優質淡奶，奶香濃而不膩',
address: '上海市普陀區真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}],
expands:[],
}，
3.methods中de 方法
//設置展開的內容
expandSelect(row, expandedRows){
var that = this
if (expandedRows.length) {
that.expands = []
if (row) {
that.expands.push(row.id)
}
}
else {
that.expands = []
}
},
getRowKeys(row){
return row.id
}
4.在<template slot-scope="props"></template>,需要將其設置爲props，否則會報錯，有知道的同學，可以留言告訴我一下，這是爲什麼