vue使用element-ui的cascader，value和label为后台返回的值，并获取选中的value和label值

最新推荐文章于 2024-08-20 17:13:41 发布

爱吃烧鸭蛋的叶安

最新推荐文章于 2024-08-20 17:13:41 发布

阅读量3.8k

点赞数 2

分类专栏： element 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/128865467

版权

element 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

文章讲述了在Vue.js中使用el-cascader组件时，如何获取选中的id和label值。通过ref和事件监听处理函数handleAreaChange，可以分别通过data数组的最后一项获取id，或者使用getCheckedNodes获取完整的选中节点对象来获取label等其他属性。

摘要由CSDN通过智能技术生成

<el-cascader
          ref="cascaderItem"
            @change="handleAreaChange"
            placeholder="试试搜索："
            :options="areaOptions"
            :props="{ checkStrictly: true, value: 'id', label: 'name',children: 'children'}"
            v-model="positionIds"
            filterable
            >
          </el-cascader>

其中value指定取值id，所以handleAreaChange中获取到的是选中的id值

handleAreaChange(data){
      let id = data[data.length - 1] // 最后一级的id
 }

value绑定了id，可以获取id值
想要同时获取到lable值
方法一：
通过ref取值；但控制台输出的的inputValue是有值的， this.$refs['cascaderItem'].inputValue却是null

let str = this.$refs['cascaderItem'].inputValue
console.log(str,'str')

方法二：通过getCheckedNodes取整个对象，想取什么值就取什么值，完美

handleAreaChange(data){
	const obj = this.$refs['cascaderItem'].getCheckedNodes() //标签上定义的 ref值
    console.log('对象',obj[0].data)  // 打印出当前选择的value所对应的对象
    }