element table 树形数据折叠展开

Jsky
2020-11-18 17:04:50
前端
js Vue Element

<el-table :data="tableData" row-key="label" default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}" ref="tableRef">

第一种：

tableCheckedAll(v){
    var self = this;
    this.$nextTick(function () {
        self.forArr(self.tableData, v)
    })
},
forArr(arr, isExpand) {
    var self = this;
    arr.forEach(function (i) {
        // toggleRowExpansion(i, isExpand)用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        self.$refs.tableRef.toggleRowExpansion(i, isExpand)
        if (i.children) {
            self.forArr(i.children, isExpand)
        }
    })
},

第二种：

    // 折叠/展开
    checkedAll(is) {
      var self = this;
      for (
        var i = 0;
        i < self.$refs.tableRef.store._getAllNodes().length;
        i++
      ) {
        self.$refs.tableRef.store._getAllNodes()[i].expanded = is;
      }
    },

本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link