用官方的element-starter写了个简单的demo:
说实话虽然示例不算详尽,但ElementUI的文档可读性还是非常强的。
具体请参考:ElementUI的表格组件说明
核心是 row-key、expand-row-keys属性
特别要注意的是row-key传入的是一个Function(row),而expand-row-keys传入的是一个数组,元素的值是要展开的row的key。
table.vue
:data="tableData5"
:row-key="getRowKeys"
:expand-row-keys="expands"
style="width: 100%">
{{ props.row.name }}
{{ props.row.shop }}
{{ props.row.id }}
{{ props.row.shopId }}
{{ props.row.category }}
{{ props.row.address }}
{{ props.row.desc }}
label="商品 ID"
prop="id">
label="商品名称"
prop="name">
label="描述"
prop="desc">
export default {
data() {
return {
tableData5: [{
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'
}],
// 获取row的key值
getRowKeys(row) {
return row.id;
},
// 要展开的行,数值的元素是row的key值
expands: []
}
},
mounted() {
// 在这里你想初始化的时候展开哪一行都可以了
this.expands.push(this.tableData5[1].id);
}
}
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}