如何在 el-tree-select 组件中展示每个选项的完整路径?

在 Element UI 的 `el-tree-select` 组件中，要展示每个选项的完整路径，你可以通过设置 `props` 对象来自定义节点的数据格式。`props` 属性允许你在渲染每个节点时传递额外的信息。下面是一个示例：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :check-strictly="true"
    ref="treeRef"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        // 树数据结构，可以包含嵌套层级信息
        {
          label: '根节点',
          children: [
            {
              label: '子节点A',
              path: ['根节点', '子节点A'], // 添加path属性表示完整路径
            },
            {
              label: '子节点B',
              children: [
                {
                  label: '孙节点B1',
                  path: ['根节点', '子节点B', '孙节点B1'],
                },
                {
                  label: '孙节点B2',
                  path: ['根节点', '子节点B', '孙节点B2'],
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        // 定义每个节点应该展示的路径信息
        key: 'path', // 需要关联到 path 属性上
        label: 'label', // 显示节点标签
        children: '__children__' // 如果有子节点，则显示子节点数组
      }
    };
  },
  methods: {
    onNodeClick(node) {
      console.log(`点击了节点：${node.path}`);
    }
  }
};
</script>

在这个例子中，我们添加了一个名为 `path` 的属性到树的每个节点，并在 `defaultProps` 中指定了 `key` 和用于渲染子节点的 `children`。当你选择一个节点时，可以通过 `ref` 的 `$.nodes` 或者监听 `@node-click` 事件来获取完整的路径。