element-ui级联选择器获取label值

element-ui的级联选择器默认获得的是 value 的数值，获取 label 的值需要使用getCheckedNodes这个方法。
我使用级联选择器用于进行地区的选择,如下：

Copy
template内：
<el-cascader v-model="regionCodeList" ref="city" placeholder="请选择生产地区" clearable :props="props" @change="handleChange"></el-cascader>

想要从数据库内异步获取每一级的数据，需要使用动态加载，也就是设置懒加载lazy为true，因为我的数据一共就三级，所以高于三级的部分就不再进行方法调用了，props实在data(){}内进行的

Copy
props: {
        // 单选
        checkStrictly: true,
        expandTrigger: 'hover',
        getCheckedNodes: 'leafOnly',
        // 懒加载
        lazy: true,
        lazyLoad (node, resolve) {
          let pid = 0 // 默认的 pid 为 0
          if (node.level > 0) { // 如果不是最外层节点
            pid = node.value // 使用当前节点的 value 作为 pid
          }
          if (node.level < 3) {
            // 调用您的 getCityInfo 方法来获取数据
            that.getCityInfo(pid).then((response) => {
              // 将数据转换为级联选择器需要的格式
              const nodes = response.data.map(item => ({
                value: item.id,
                label: item.name,
                leaf: item.pid === 1
              }))
              // 通过调用 resolve 将子节点数据返回，通知组件数据加载完成
              resolve(nodes)
            }).catch((error) => {
              console.error('Failed to fetch city info:', error)
              resolve([]) // 在发生错误时，传递空数组给 resolve 函数
            })
          } else {
            resolve([])
          }
        }
      }

具体的获取数据的方法在methods(){}里，同时对数据进行格式化也是在这里

Copy
   getCityInfo(pid) { //从服务器获取数据信息
      return cityApi.getCityInfo(pid)
    },

    handleChange(value) {
//获取级联选择器的label数据
      const labels = this.$refs['city'].getCheckedNodes()[0].pathLabels 
对label的数据进行规格化
      const concatenatedLabel = labels.join('')
      this.productForm.proplace = concatenatedLabel
    },

如果不进行规格化，现实的信息是：["河北省", "邯郸市", "丛台区"]，进行规格化后是“河北省邯郸市丛台区”，具体要什么效果根据项目的需要进行配置，如果只要你选择的最后一个label，不要前面几级的数据，只用this.$refs['city'].getCheckedNodes()[0].label就行了