树形表格保存展开关闭状态

编辑数据后，记录用户操作行的展开和关闭

注意，以下列子是默认展开，记录合上的状态

注意 row-key 需要给每行一个key
expand-change 点击行的操作

<el-table
       ref="tableItem"
       slot="table"
       :data="tableBox.list"
       height="100%"
       class="flex-su-order-1"
       style="width: 100%;margin-bottom: 20px;"
       :row-key="rowKye"
       border
       default-expand-all
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       @expand-change="defaultExpandedKeys"
     >

methods 方法

data中 defaultExpandedKeysList 存放数据

getList(){
	在数据返回后
	 this.$nextTick(function() {
	 //手动设置展开或合拢
       this.expandableListView()
     })
}
//表格的每个key
rowKye(val) {
      return val.id
    },
    //点击行的操作 expanded false为合上保存数据
    defaultExpandedKeys(expandedRows, expanded) {
      const number = this.defaultExpandedKeysList.indexOf(expandedRows)
      if (!expanded) {
        this.defaultExpandedKeysList.push(expandedRows)
      } else {
        this.defaultExpandedKeysList.splice(number, 1)
      }
    },
//下面两个方法其实就是简单的遍历 匹配 把需要合龙 手动处理下
    expandableListView() {
      if (this.defaultExpandedKeysList.length > 0) {
        let idList = this.defaultExpandedKeysList.map(ele => ele.id)
        //this.tableBox.list 就是表格的数据
        this.doClose(this.tableBox.list, idList)
      }
    },

    doClose(val, idList) {
      val.forEach(deptElement => {
        if (idList.includes(deptElement.id)) {
        //false是合拢
          this.$refs.tableItem.toggleRowExpansion(deptElement, false)
        }
        if (!isEmpty(deptElement.children)) {
          this.doClose(deptElement.children, idList)
        }
      })
    },

代码可以直接用