vue3 级联选择器如何获取label的值

在Vue3中级联选择器通过v-model绑定一个数组，数组的每一项代表每个级别的选中值。如果想要获取每个选中项的label值，可以使用ref来获取级联选择器的实例，然后通过调用实例的方法获取选中项的label值。具体实现步骤如下：

1. 在template中定义级联选择器，并通过v-model绑定选中项的数组

<el-cascader
  v-model="selectedValues"
  :options="options"
  @change="handleChange"
  ref="cascader"
></el-cascader>

2. 在script中定义selectedValues数组和options选项列表

export default {
  data() {
    return {
      selectedValues: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                },
                {
                  value: 'xiaolv',
                  label: '效率'
                },
                {
                  value: 'kekong',
                  label: '可控'
                }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      // 获取级联选择器实例
      const cascader = this.$refs.cascader
      // 遍历选中项数组，获取每个选中项的label值
      const labels = value.map((item, index) => {
        const selectedOption = cascader.options[index].children.find(
          child => child.value === item
        )
        return selectedOption.label
      })
      console.log(labels)
    }
  }
}

3. 在handleChange方法中，首先通过ref获取级联选择器的实例，然后遍历选中项数组，通过选中项的value值在options中查找对应的选项对象，最后获取选项对象的label值，将label值存储在labels数组中。

注意：在获取级联选择器实例时，需要给级联选择器添加ref属性，然后通过this.$refs.cascader来获取实例。在遍历选中项数组时，需要根据选中项在options中的位置，找到对应的选项对象，再从选项对象中获取label值。