vue3的setup语法糖 级联选择器如何获取label的值

在Vue3中，可以使用`ref`来引用DOM元素或组件实例，然后通过访问其属性或方法来获取值。对于级联选择器，可以通过以下步骤来获取label的值：

1. 在setup函数中，使用`ref`引用级联选择器组件实例：

import { ref } from 'vue'
import Cascader from 'your-cascader-component'

export default {
  setup() {
    const cascaderRef = ref(null)
    // ...
  }
}

2. 在级联选择器组件上添加`ref`属性，将其与引用的变量绑定：

<template>
  <Cascader ref="cascaderRef" :options="options" @change="handleChange" />
</template>

3. 在`handleChange`方法中，使用引用的变量获取级联选择器的选中值，并根据选中值获取对应的label值：

export default {
  setup() {
    const cascaderRef = ref(null)

    const options = [
      {
        value: 'beijing',
        label: '北京',
        children: [
          {
            value: 'haidian',
            label: '海淀区'
          },
          {
            value: 'dongcheng',
            label: '东城区'
          }
        ]
      },
      {
        value: 'shanghai',
        label: '上海',
        children: [
          {
            value: 'pudong',
            label: '浦东新区'
          },
          {
            value: 'minhang',
            label: '闵行区'
          }
        ]
      }
    ]

    function handleChange(value) {
      const labels = cascaderRef.value.displayedValue   // 获取选中值对应的label数组
      const label = labels.join('/')                     // 将label数组合并成字符串
      console.log(label)                                 // 输出label值
    }

    return {
      cascaderRef,
      options,
      handleChange
    }
  }
}

在上述代码中，`cascaderRef.value.displayedValue`可以获取选中值对应的label数组，然后将其合并成字符串即可得到label值。