<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
标签:isExpansion,elementui,deviceList,item,toggleRowExpansionAll,table,type,children From: https://www.cnblogs.com/luo1240465012/p/16820493.html