element el-tree多选返显

Element UI的`el-tree`组件是一个用于展示树形数据结构的选择控件，它支持单选或多选模式。当你想要实现在树节点之间复选状态的保存并在下一次加载时显示已选择的状态，可以按照以下步骤操作：

1. **监听tree节点的change事件**：当用户在树上点击选择或取消选择某个节点时，`el-tree`会触发`check-change`或`lazy-check-change`事件，你可以在这个事件处理函数中记录节点的状态。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @check-change="handleCheckChange"
  ></el-tree>
</template>

<script>
export default {
  methods: {
    handleCheckChange(node) {
      // 将当前节点的数据保存到你的状态管理（如Vuex、本地存储等）
      this.selectedNodes.push(node);
    },
  }
}
</script>

2. **设置默认选中项**：如果你已经有预设的选中状态，可以在渲染前设置`default-checked-keys`属性。如果是通过服务器返回的数据获取选中状态，则需要在接收到数据后更新这个属性。

data() {
  return {
    selectedNodes: [], // 从持久化存储中读取
    defaultProps: { children: '__children__', disabled: '__disabled__' }, // 树节点属性
  };
},
created() {
  if (this.preSelectedKeys) { // 如果有预设选中键
    this.selectedNodes = this.preSelectedKeys.map(key => findNodeByKey(this.treeData, key));
  }
},

3. **渲染时绑定选中状态**：在`el-tree`的节点渲染模板中，可以使用`checked`属性来绑定节点的选中状态，这样就可以在页面上看到已保存的选择效果了。

<el-tree-node
  v-for="node in nodes"
  :key="node.id"
  :label="node.label"
  :checked="selectedNodes.includes(findNodeByKey(node, node.key))"
></el-tree-node>