从el-cascader的options选项中，选择各级的名字， 并拼接成字符串

在使用 Element UI 的 el-cascader 组件时，如果你需要从选中的选项中提取各级的名字并拼接成一个字符串，可以通过监听 el-cascader 的 change 事件来实现。当用户选择了一个选项后，你可以访问到选中的值，并根据这些值去 options 中查找对应的名字。

HTML 模板

<template>
  <div>
    <el-cascader
      v-model="selectedOptions"
      :options="options"
      @change="handleChange"
      clearable
      placeholder="请选择"
    ></el-cascader>
    <p>选中的路径: {{ selectedPath }}</p>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                }
              ]
            }
          ]
        },
        // 更多选项...
      ],
      selectedOptions: [],
      selectedPath: ''
    };
  },
  methods: {
    handleChange(value) {
      this.selectedPath = this.getPathLabel(value);
    },
    getPathLabel(values) {
      if (!values || !values.length) return '';

      let pathLabels = [];
      const findLabel = (options, value) => {
        for (let option of options) {
          if (option.value === value) {
            pathLabels.push(option.label);
            return;
          }
          if (option.children) {
            findLabel(option.children, value);
          }
        }
      };

      values.forEach((value, index) => {
        // 如果当前级的标签还未被添加，则进行查找
        if (pathLabels.length <= index) {
          findLabel(this.options, value);
        }
      });

      return pathLabels.join(' / ');
    }
  }
};
</script>

在这个例子中：

• el-cascader 组件绑定了 v-model 到 selectedOptions，用来存储用户选择的值。
• 当用户改变选择时，会触发 @change 事件，调用 handleChange 方法。
• handleChange 方法接收选中的值数组，并调用 getPathLabel 方法来获取对应的路径名称。
• getPathLabel 方法通过递归遍历 options 来找到每个值对应的标签，并将这些标签加入到 pathLabels 数组中。
• 最终，pathLabels 数组中的元素通过 ' / ' 连接起来形成完整的路径字符串。

这样，每当用户选择或更改 el-cascader 中的选项时，都会自动更新 selectedPath，显示所选路径的完整名称。