element-UI级联选择器(Cascader)获取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>

注意:如上述代码:
先给级联选择器ref=""重命一个新组件名为cascaderAddr
然后,使用this.$refs[‘新组件名’].currentLabels

在使用element-ui级联选择器Cascader)时,获取选中项的label通常是在选择器的事件回调函数中实现的。级联选择器组件提供了`change`事件,当选项发生变化时,会触发此事件,并传递当前选中项的。通过事件回调函数中的参数,可以获取选中的数据项,其中包括了label。 以下是一个示例代码,演示如何获取选中label: ```javascript <template> <el-cascader :options="cascaderOptions" v-model="value" @change="handleChange"> </el-cascader> </template> <script> export default { data() { return { value: [], // 用于双向绑定选中 cascaderOptions: [ // 这里是级联选择器的选项数据 ] }; }, methods: { handleChange(value, selectedOptions) { // value是选中项的组成的数组 // selectedOptions是选中项的数据组成的数组 const label = selectedOptions.map(item => item.label).join(' / '); // 将label用' / '连接成字符串 console.log(label); // 打印选中label } } }; </script> ``` 在这个例子中,`handleChange`方法会在用户选择不同的级联选项时被调用。`selectedOptions`参数是一个数组,包含了用户选中的所有级联选项的数据。通过映射(`map`)这个数组并获取每个对象的`label`属性,然后将这些label用' / '连接起来,就得到了一个完整的选中label路径字符串。最后,这个字符串被打印出来或者可以根据需要进行其他操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值