element ui table中,设置数据可以展开只需要设置 type="expand",
<el-table-column type="expand">
<template slot-scope="scope">
展开后的显示内容
</template>
</el-table-column>
根据数据设置展开图标是否展示从css上解决:
html
<el-table :data="tableData5" style="width: 100%" :row-class-name="setClassName">
<el-table-column type="expand">...</el-table-column>
</el-table>
js
data() {
return {
tableData5: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333',
expand: true
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333',
expand: false
}, {
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333',
expand: true
}, {
id: '12987126',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333',
expand: false
}]
}
},
methods:{
setClassName({row, index}){
// 通过自己的逻辑返回一个class或者空
return row.expand ? 'expand' : '';
},
},
css
.expand .el-table__expand-column .cell {
display: none;
}