elementui table type="expand" 实现点击行展开行
<el-table fit border size="small" :data="deviceList" ref="dataTreeList" @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 } }
来源:https://www.jianshu.com/p/47064ff15219

浙公网安备 33010602011771号