elememtUI--Select下拉框及Cascader级联选择器获取value值、label值

最新推荐文章于 2024-08-06 15:03:02 发布

Code--Maker

最新推荐文章于 2024-08-06 15:03:02 发布

阅读量1.3k

点赞数 1

分类专栏： ElementUI 文章标签： js vue elementui

本文链接：https://blog.youkuaiyun.com/gdxjznfw/article/details/119687383

版权

ElementUI 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在前端开发中，针对select单选框、多选框及Element UI的Cascader级联选择器的事件绑定和数据处理。通过变更事件监听，展示了如何在change事件中获取选中项的value和label，并更新相关数据模型。同时，详细说明了不同版本的Element UI中，获取Cascader选中值的方法，涉及版本差异和代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

------ select单选框-----

select绑定change事件

onSelectedDrug(val){
  let obj = {};
  obj = this.options.find((item)=>{ // 这里的options就是数据源
    return item.value === val; // 筛选出匹配数据
  });
  console.log(obj);// 获取的item所有的值
  console.log(obj.label);// 获取的label
  console.log(item); // 获取的value
},

------ select多选框-----

select多选框绑定change事件

changeLocationValue(val){
   this.departmentValues = [] //初始化数据
   this.departmentNames = [] //初始化数据
   for(let i=0;i<=val.length-1;i++){
     this.options.find((item)=>{ //这里的options就是数据源
       if(item.id == val[i]){
         this.departmentValues.push(item.value) // 获取value值
         this.departmentNames.push(item.label) // 获取label值
       }
     });
   }
   console.log(this.departmentIds)
   console.log(this.departmentNames)
},

-----Cascader级联选择器-----

1. element ui 2.9.2版本之前

// 2.9.2之前
this.$refs['cascaderAddr'].currentLabels

2. element ui 2.9.2版本之后

// 2.9.2之后
this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels

注: 给el-cascader设置ref：cascaderAddr，然后通过this.$refs[‘cascaderAddr’].getCheckedNodes()[0].pathLabels 来获取选中的label值。

<template>
     <el-cascader
         ref="cascaderAddr"
         :props="props"
         v-model="calorimeterForm.property"
         :options="options"
         @change="handleChange"
        ></el-cascader>
</template>

<script>

 // methods方法
 handleChange(value) {
     let arr = this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels;
     this.calorimeterForm.propertyName = arr.join("/");
     this.calorimeterForm.property = this.calorimeterForm.property.toString()
 },
 
 </script>