以下是二级表格的展开折叠,三级同样:
展开折叠
1.给按钮添加展开和折叠事件:
<el-button type="small" icon="el-icon-plus" @click="actionUnfoldFunc(true)">全部展开</el-button>
<el-button type="small" icon="el-icon-minus" @click="actionUnfoldFunc(false)">全部折叠</el-button>
2.在export-methods 下添加方法:
data(){
return {
isExpand:true,// 默认为展开状态
}
}
methods: {
actionUnfoldFunc(isAss){
//this.$refs.ctab.handleExpand(isAss)
this.handleExpand(isAss)
},
handleExpand(isAss) {
// 此判断是否为展开状态或折叠状态--若展开折叠是同一个按钮则无需传参和加此if
if (this.isExpand == isAss){
return
}
this.isExpand = !this.isExpand
// this.tableData为返回的二级数据data
this.$nextTick(() => {
this.forArr(this.tableData, this.isExpand)
})
},
// 遍历
forArr(arr, isExpand) {
arr.forEach(i => {
// toggleRowExpansion见element文档
this.$refs.ctab.toggleRowExpansion(i, isExpand)
if (i.children) {
this.forArr(i.children, isExpand)
}
})
},
}
3.点击即可实现全部展开和折叠;
完!