element-ui 中 Cascader 级联选择器同时获取value值和label值

Cascader 级联选择器同时获取value值和label值

<el-cascader
    :options="options"
    v-model="selectedOptions"
    :props="props"
    size="small"
    ref="cascaderAddr"
    filterable
    @change="handleChange"
    change-on-select
    placeholder="请选择分类"/>

<script>
handleChange(e) {
      //第1种
      var   thsAreaCode = this.$refs['cascaderAddr'].currentLabels    // 获取label值
      console.log(thsAreaCode); //  最终结果是个一维数组对象
       //第2种
      const checkedNodes = this.$refs['cascaderAddr'].getCheckedNodes() // 获取当前点击的节点
      console.log(checkedNodes)
      console.log(checkedNodes[0].data.label) // 获取当前点击的节点的label
      console.log(checkedNodes[0].pathLabels) // 获取由 label 组成的数组
},
</script>

vue3

<el-form-item label="文件目录" prop="filePath">
          <el-cascader
            ref="cascaderRef"
            v-model="form.other"
            :options="deptOptions"
            :props="{ value: 'id', label: 'fileName', children: 'children' }"
            :style="{ width: '100%' }"
            placeholder="请选择级联选择"
            @change="getArriveListName"
            clearable
          />
</el-form-item>
const cascaderRef = ref([]);

function getArriveListName() {
    form.value.filePath = cascaderRef.value.getCheckedNodes()[0].pathLabels.join('/');
    console.log(cascaderRef.value.getCheckedNodes()[0].pathLabels)
}