element-plus el-tree-select 回显完整路径

Element Plus的`el-tree-select`组件是一个用于选择树形结构数据的下拉列表，它支持回显功能，即当从数据库获取到预选值时，可以在组件渲染时显示完整的路径。要实现在`el-tree-select`中回显完整路径，通常需要按照以下步骤操作：

1. **设置选项**: 当获取到完整的树形数据时，每个节点应包含一个`label`用于展示文本，以及一个`value`用于关联数据库ID或其他唯一标识。

[
  {
    label: '父节点',
    children: [
      {
        label: '子节点1',
        value: 'subnode1'
      },
      {
        label: '子节点2',
        value: 'subnode2',
        path: ['父节点', '子节点2'] // 或者你可以自定义一个字段存储路径信息
      }
    ]
  }
]

2. **初始化组件**: 初始化`el-tree-select`时，将整个树形数据作为`options`属性传入，并且在`props-data`里设置默认已选中的项的完整路径。

<el-tree :data="treeData" :props="{_children: 'children'}" :value-key="valueKey" ref="treeSelect">
  <!-- ... -->
</el-tree>

export default {
  data() {
    return {
      treeData: [], // 根据实际获取的数据填充
      selectedPath: ['顶级节点'], // 初始已选中的完整路径
    };
  },
  created() {
    this.loadTreeData(); // 负责加载并设置初始数据
  },
  methods: {
    loadTreeData() {
      const initialSelection = this.selectedPath.join('/'); // 获取已选路径字符串
      // ...从API或其他地方加载树形数据，如果找到匹配项，设置selectedValue
      // 如果有匹配，则设置this.treeData为包含完整路径的树形数据，同时更新selectedPath
    }
  },
};

3. **处理回显和切换**：当用户点击某个节点时，通过`ref`监听组件事件，比如`@select`，可以根据`value`来找出对应的节点路径，并更新`selectedPath`。

methods: {
  handleSelect(node) {
    const path = node.path || [node.label]; // 获取当前节点路径
    if (path === this.selectedPath) {
      // 如果路径不变，不做处理
    } else {
      this.selectedPath = path;
    }
  }
}