el-select-tree 回显显示子级及所选的所有父级

el-select-tree 是 Element UI 提供的一个树形选择组件，可以实现多级树结构的选择功能。在 el-select-tree 中，回显显示子级及所选的所有父级可以通过以下步骤实现：

1. 首先，需要准备一个树形数据源，数据源中每个节点包含一个唯一的标识符（如 id），以及父节点的标识符（如 parentId）。

2. 在 el-select-tree 中，使用 v-model 绑定一个变量来保存所选的节点。

3. 在 el-select-tree 的模板中，设置 show-all-levels 属性为 true，以显示所有层级的节点。

4. 在 el-select-tree 的模板中，使用 scoped slot 来自定义每个节点的显示内容。在 scoped slot 中，可以根据节点的层级关系来添加前缀或样式，以区分父级和子级节点。

5. 在 el-select-tree 的模板中，使用 filter-node-method 属性来自定义过滤节点的方法。在过滤方法中，可以根据节点的层级关系来判断是否显示该节点。

下面是一个示例代码：

<template>
  <el-select-tree v-model="selectedNode" :data="treeData" show-all-levels :filter-node-method="filterNode">
    <template slot-scope="{ node }">
      <span v-if="node.level === 0" style="font-weight: bold">{{ node.label }}</span>
      <span v-else>{{ '└─'.repeat(node.level) }}{{ node.label }}</span>
    </template>
  </el-select-tree>
</template>

<script>
export default {
  data() {
    return {
      selectedNode: null,
      treeData: [
        { id: 1, parentId: null, label: 'Node 1' },
        { id: 2, parentId: 1, label: 'Node 1-1' },
        { id: 3, parentId: 2, label: 'Node 1-1-1' },
        { id: 4, parentId: 2, label: 'Node 1-1-2' },
        { id: 5, parentId: 1, label: 'Node 1-2' },
        // 其他节点...
      ]
    };
  },
  methods: {
    filterNode(node, keyword) {
      // 过滤方法示例，根据节点的层级关系判断是否显示该节点
      if (node.level === 0 || node.label.includes(keyword)) {
        return true;
      }
      return false;
    }
  }
};
</script>

在上述示例中，el-select-tree 组件绑定了一个变量 selectedNode，用于保存所选的节点。treeData 是树形数据源，包含了多个节点。通过设置 show-all-levels 属性为 true，可以显示所有层级的节点。使用 scoped slot 来自定义每个节点的显示内容，并根据节点的层级关系添加前缀或样式。通过 filter-node-method 属性来自定义过滤节点的方法，根据节点的层级关系判断是否显示该节点。