el-cascader获取中文值

在Vue.js中使用Element UI的el-cascader组件时，获取中文值可以通过以下几种方式实现：

1. **使用v-model绑定数据**：el-cascader组件通常使用v-model进行双向数据绑定。通过绑定一个数组来获取选中的值。

2. **获取选中项的标签**：可以通过遍历选中的节点来获取中文值。

以下是一个示例代码，展示了如何获取el-cascader组件的中文值：

<template>
  <div>
    <el-cascader
      v-model="selectedOptions"
      :options="options"
      @change="handleChange"
      :props="{ emitPath: false }"
    ></el-cascader>
    <p>选中的中文值：{{ selectedLabels }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      selectedLabels: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      this.getLabels(this.options, value, []);
    },
    getLabels(options, value, labels) {
      for (let option of options) {
        if (option.value === value) {
          labels.push(option.label);
          return;
        }
        if (option.children) {
          this.getLabels(option.children, value, labels);
          if (labels.length > 0) {
            labels.unshift(option.label);
            return;
          }
        }
      }
    }
  },
  watch: {
    selectedOptions: {
      handler(newVal) {
        this.selectedLabels = [];
        this.getLabels(this.options, newVal, this.selectedLabels);
      },
      deep: true
    }
  }
};
</script>

在这个示例中，`handleChange`方法会在选中的值发生变化时被调用，并通过`getLabels`方法递归地获取中文标签。`selectedLabels`会被更新为选中项的中文值。