Element UI Table 树形结构默认展开和收起

1,274 阅读1分钟

HTML

<!-- 需要给table加一个v-if属性控制table销毁或初始化 -->
<el-table v-if="isShowTable" :data="tableDate" ></el-table>

JS

 // 默认true isShowTable: true 
 watch: { 
 tableDate: function () { this.$nextTick(() => { this.expandAll() }) } 
 }, 
/* 触发所有展开图标的click事件 */
expandAll () { 
// 获取点击的箭头元素 
let els = document.getElementsByClassName('el-table__expand-icon')
for (let i = 0; i < els.length; i++) {
els[i].click() } 
},
/* 展开所有下级 */
unFoldAll () {
this.isShowTable = false this.$nextTick(function () { 
this.isShowTable = true 
let _this = this window.setTimeout(function () { _this.expandAll() }, 300) })
},
/* 收起所有下级 */ 
foldAll () { this.isShowTable = false this.$nextTick(function () { this.isShowTable = true }) }