给el-tree的data重新赋值时保持原有的展开折叠结构

        每次新增、编辑完后，重新给el-tree赋值都会刷新el-tree的结构，变回默认全部展开或默认全部折叠的样子，但是需求希望能够保持刷新前的样子，研究了一下el-tree的文档，有了两个思路：

一、通过控制el-tree的属性default-expanded-keys的数组值来控制节点的展开和折叠
1、需求要求初始化时节点全部展开，所以在初始化的时候先遍历获取到所有节点的id存为一个数组，赋值给el-tree的default-expanded-keys，然后再给el-tree的data赋值，这样初始化的时候节点也是全部展开的，代码如下：

<div>
 <el-tree
  ref="tree"
  :data="data"
  node-key="id"
  icon-class="el-icon-arrow-right"
  highlight-current
  :props="defaultProps"
  :expand-on-click-node="false"
  :default-expanded-keys="defaultExpandedKeys"
  :auto-expand-parent="false"
 />
</div>Ï

<script>
import { tree, addArea, updateArea } from '@/api/basic/area';
export default {
  data() {
    return {
      data: [], // 树形结构的数据
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultExpandedKeys: [] // 所有要展开的节点的id
    };
  },
  methods: {
    // 查询树形结构的数据
    getTreeselect() {
      tree().then(response => {
        this.getNodeIdAll(response.data); // 先获取所有的id
        this.areaOptions = response.data; // 再给树的data赋值
        this.$nextTick(() => {
          // 初始化时默认选择第一个节点
          this.$refs.tree.setCurrentNode(this.areaOptions[0]);
        });
      })
    },
    // 获取所有已有的节点的id
    getNodeIdAll(list) {
      list.forEach(val => {
        if (val.children && val.children.length > 0) {
          this.getAreaIdAll(val.children);
        }
        this.defaultExpandedKeys.push(val.id);
      });
    }
  }
};
</script>

2、通过节点折叠事件node-collapse来删除节点id数组中该节点对应的id，通过节点展开事件node-expand来把该节点对应的id添加到节点id的数组中，具体代码如下：

<div>
 <el-tree
  ref="tree"
  :data="data"
  node-key="id"
  icon-class="el-icon-arrow-right"
  highlight-current
  :props="defaultProps"
  :expand-on-click-node="false"
  :default-expanded-keys="defaultExpandedKeys"
  :auto-expand-parent="false"
  @node-expand="handleNodeExpand"
  @node-collapse="handleNodeCollapse"
 />
</div>Ï

<script>
import { tree, addArea, updateArea } from '@/api/basic/area';
export default {
  data() {
    return {
      data: [], // 树形结构的数据
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultExpandedKeys: [] // 所有要展开的节点的id
    };
  },
  methods: {
    // 查询树形结构的数据
    getTreeselect() {
      tree().then(response => {
        this.getNodeIdAll(response.data); // 先获取所有的id
        this.areaOptions = response.data; // 再给树的data赋值
        this.$nextTick(() => {
          // 初始化时默认选择第一个节点
          this.$refs.tree.setCurrentNode(this.areaOptions[0]);
        });
      })
    },
    // 获取所有已有的节点的id
    getNodeIdAll(list) {
      list.forEach(val => {
        if (val.children && val.children.length > 0) {
          this.getAreaIdAll(val.children);
        }
        this.defaultExpandedKeys.push(val.id);
      });
    },
    // 展开节点时触发
    handleNodeExpand(data) {
      // 判断数组中有没有该节点的id
      if (!this.defaultExpandedKeys.includes(data.id)) {
        // 没有则添加到数组中
        this.defaultExpandedKeys.push(data.id);
      }
    },
    // 折叠节点时触发
    handleNodeCollapse(data) {
      // 判断数组中有没有该节点的id
      if (this.defaultExpandedKeys.includes(data.id)) {
        // 有则获取到该id在数组中的下标
        const index = this.defaultExpandedKeys.findIndex(item => item === data.id);
        // 然后通过下标删除该节点的id
        this.defaultExpandedKeys.splice(index, 1);
      }
    }
  }
};
</script>

这样就可以做到每次给data重新赋值时，el-tree的样式不变。

二、每次新增编辑时，只去修改被编辑的节点对应的数据，这样el-tree的结构就不会整体刷新（因为思路一实现的很顺利，思路二就懒得试了，等哪天有空想起来了再试试看）