最终效果
result.gif
使用场景
当行内容过多并且不想显示横向滚动条时 或者是需要展示当前物品下所属的资产时 可以使用 Table 展开行功能。
重点参数
expand-change： 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows：树形表格时第二参数为 expanded）
expandedRows：其实就只当前展开行的合集。
type： 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮。
toggleRowExpansion：用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否 参数(row,expanded expanded 为 true 则展开)
代码示例
<el-table fit border size="small" :data="deviceList" ref="dataTreeList" style="width: 100%" @expand-change="handleExpandChange">
<el-table-column type="expand">
// 如果表头需要统一管理按钮 可加入以下代码
<template slot="header" slot-scope="scope">
<el-button type="text" size="mini" @click="toggleRowExpansion">{{ isExpansion ? "关闭" : "展开" }</el-button>
</template>
<template slot-scope="scope">加入需要折叠的代码</template>
</el-table-column>
</el-table>
/** 表格展开与关闭 */
toggleRowExpansion(){
if(this.deviceList.length){
this.isExpansion = !this.isExpansion;
this.toggleRowExpansionAll(this.deviceList, this.isExpansion);
}
},
toggleRowExpansionAll(data, isExpansion) {
data.forEach((item) => {
this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
if (item.children !== undefined && item.children !== null) {
this.toggleRowExpansionAll(item.children, isExpansion);
}
});
},
// 判断是否所有行都展开或者关闭
handleExpandChange(row,rows){
if(this.deviceList.length == rows.length){
this.isExpansion = true
}else{
this.isExpansion = false
}
}
