vue3 el-cascader获取label值

在 Vue3 和 Element-Plus 中使用 `el-cascader` 组件，可以通过 `change` 事件来获取选中的值。

例如，假设你有一个 `el-cascader` 组件如下：

<el-cascader
  v-model="selectedOptions"
  :options="options"
  @change="handleCascaderChange"
></el-cascader>

其中，`selectedOptions` 是一个数组，表示当前选中的值，`options` 是一个数组，表示可选的选项。`handleCascaderChange` 是一个方法，用于处理 `change` 事件。

在 `handleCascaderChange` 方法中，可以通过遍历 `selectedOptions` 数组来获取每一级选中的值，并将它们组合成一个字符串，作为 `el-cascader` 的 `label` 值。例如：

export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleCascaderChange(value) {
      let label = ''
      for (let i = 0; i < value.length; i++) {
        const option = this.options[i].children.find(item => item.value === value[i])
        label += option.label + (i < value.length - 1 ? ' / ' : '')
      }
      console.log('选中的值：', value)
      console.log('选中的标签：', label)
    }
  }
}

在上面的代码中，我们使用 `find` 方法来查找每一级选中的值对应的选项，然后将它们的 `label` 值拼接在一起，并在每一级之间添加斜杠分隔符。最终的结果就是一个字符串，表示当前选中的标签。