vue+el-table实现展开与折叠
本文会提到两种实现方法,之前我使用的是第一种,后来加了固定列,发现展开与折叠失效,故而出现了第二种方法。
·
本文会提到两种实现方法,之前我使用的是第一种,后来加了固定列,发现展开与折叠失效,故而出现了第二种方法。
一、通过class名称获取节点,并对节点进行操作(该方法表格添加固定列会失效)
1.全部展开
looAll(){
let expandElementList = document.getElementsByClassName(
"el-table__expand-icon"
);
if (this.dataList.length != 0 && expandElementList.length != 0) {
for (let i = 0; i < expandElementList.length; i++) {
// 添加dafult类,如已经存在,取消添加
expandElementList[i].classList.add("dafult");
}
// 获取所有已经展开元素集合
const expanded = this.$el.getElementsByClassName(
"el-table__expand-icon--expanded"
);
if (expanded) {
for (let j = 0; j < expanded.length; j++) {
// 如果已经展开,移除dafult类,剩余未展开的元素带有dafult类
expanded[j].classList.remove("dafult");
}
// 获取所有dafult类:带有展开图标且还未展开的元素
const dafult = this.$el.getElementsByClassName("dafult");
for (let k = 0; k < dafult.length; k++) {
// 点击事件:触发展开图标的点击事件
dafult[k].click();
}
}
}
},
2.全部折叠
closeAll(){
if (this.dataList.length != 0) {
// 获取所有已展开元素
const expanded = this.$el.getElementsByClassName(
"el-table__expand-icon--expanded"
);
if (expanded) {
for (let i = 0; i < expanded.length; i++) {
// 点击事件:触发展开图标的点击事件
expanded[i].click();
}
}
}
}
二、通过el-table中的 toggleRowSelection方法来实现展开与折叠功能
//展开
looAll(){
this.$nextTick(() => {
this.forArr(this.dataList, true)
})
},
//折叠
closeAll(){
this.$nextTick(() => {
this.forArr(this.dataList, false)
})
},
// 遍历
forArr(arr, isExpand) {
arr.forEach(i => {
// toggleRowExpansion(i, isExpand)用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
this.$refs.tableData.toggleRowExpansion(i, isExpand)
if (i.children) {
this.forArr(i.children, isExpand)
}
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)