el-select获取选中项label值

elementUI下拉选择框,获取选中值的label
向后端传递下拉框查询参数时,后端就是要用label,而非主键id,那就只能前端去找选中项的label值。
获得下拉框数据后,用id作为value标识,如何在选中时获取label值呢?我目前只会查找比对整个列表,有没有更好一点的办法呀?
页面
数据源
目前实现的代码

 <el-form-item label="部门名称" prop="dept_id">
     <el-select v-model="dept_id" placeholder="请选择部门" @change="AddSelectDept">
        <el-option
            v-for="(item,index) in deptList"
            :key="index"
            :label="item.name"
            :value="item.id"
        ></el-option>
      </el-select>
 </el-form-item>
  AddSelectDept (val) {
        // XXX 获取下拉框label的方法,此处需要对比查找整个列表,较为麻烦
        this.deptName = val ? this.deptList.find(ele => ele.id === val).name : ''
        }
### 回答1: 可以通过以下方法获取el-select选中label: 1. 获取选中的value 可以通过v-model绑定el-select的value属性,获取选中的value。例如: ``` <el-select v-model="selectedValue"> <el-option label="选1" value="1"></el-option> <el-option label="选2" value="2"></el-option> <el-option label="选3" value="3"></el-option> </el-select> ``` 在Vue实例中,可以通过this.selectedValue获取选中的value。 2. 根据value获取label 可以通过遍历el-select的options数组,根据选中的value获取对应的label。例如: ``` <el-select v-model="selectedValue"> <el-option label="选1" value="1"></el-option> <el-option label="选2" value="2"></el-option> <el-option label="选3" value="3"></el-option> </el-select> ``` 在Vue实例中,可以通过以下方法获取选中label: ``` let selectedLabel = ''; this.$refs.select.options.forEach(option => { if (option.value === this.selectedValue) { selectedLabel = option.label; } }); console.log(selectedLabel); ``` ### 回答2: el-selectElement UI 中的下拉选择框组件,它可以将一组选以列表的形式展现,用户可以从列表中选择一个选。在某些情况下,我们需要获取用户具体选择了哪一个选的信息,用于后续逻辑的处理。本文将介绍如何使用 el-select 获取选中label。 首先需要了解的是,el-select 默认情况下提供了两种选:value 和 label。其中,value 表示选中的选,而 label 表示选中的选的文本内容,即用户看到的内容。如果你以选中为依据进行后续逻辑处理,那么直接使用 el-select 的 v-model 即可获取选中。例如: ``` <el-select v-model="selectedValue"> <el-option label="Option 1" value="value1"></el-option> <el-option label="Option 2" value="value2"></el-option> <el-option label="Option 3" value="value3"></el-option> </el-select> ``` 在上述代码中,我们使用 v-model 绑定了 selectedValue 属性,这样在代码中就可以直接访问到用户选择的。 如果你需要获取用户选择的 label,可以使用 el-select 的变量 $refs 来获取选中的选的元素对象,然后从元素对象中获取到选label 属性。例如: ``` <el-select v-model="selectedValue" ref="select"> <el-option label="Option 1" value="value1"></el-option> <el-option label="Option 2" value="value2"></el-option> <el-option label="Option 3" value="value3"></el-option> </el-select> ``` 在上述代码中,我们使用了 ref 属性将 el-select 组件的引用命名为 select。这样,在代码中就可以通过 this.$refs.select.$el.querySelector('.el-select__tags-text') 获取选中的元素对象,继而从元素对象中获取到选label 属性。例如: ``` // 从 $refs 中获取选中的元素对象 const selectItem = this.$refs.select.$el.querySelector('.el-select__tags-text') // 获取选中label 属性 const label = selectItem.textContent.trim() console.log(label) // 输出选label ``` 总之,el-select 可以通过 v-model 属性获取选中,而通过 $refs 可以获取选中的元素对象,从而间接或直接获取选中label 属性。以上就是使用 el-select 获取选中label 的方法,希望对你有所帮助。 ### 回答3: el-select是基于Element UI框架实现的下拉选择框组件,常用于表单中。在使用el-select时,有时需要获取用户所选中的选的文本内容,也就是把选中的value转化为对应的label。下面就来介绍一下如何通过el-select获取选中labelel-select提供了v-model属性,用于双向绑定选中,我们只需要把v-model绑定到一个变量上,就可以在函数中通过该变量获取选中的value。如下所示: <el-select v-model="selectedValue"> <el-option label="北京" value="beijing"></el-option> <el-option label="上海" value="shanghai"></el-option> <el-option label="广州" value="guangzhou"></el-option> <el-option label="深圳" value="shenzhen"></el-option> </el-select> 其中,selectedValue为绑定变量,我们可以通过selectedValue来获取选中的value。但是如何获取选中label呢?这时候就需要使用el-select提供的绑定事件change了。 在el-select中绑定change事件,当用户选择某一选时会触发change事件,我们可以在事件处理函数中获取选中label。如下所示: <el-select v-model="selectedValue" @change="getSelectedLabel"> <el-option label="北京" value="beijing"></el-option> <el-option label="上海" value="shanghai"></el-option> <el-option label="广州" value="guangzhou"></el-option> <el-option label="深圳" value="shenzhen"></el-option> </el-select> 在data中定义函数getSelectedLabel,如下所示: data() { return { selectedValue: '', } }, methods: { getSelectedLabel() { let options = this.$refs.select.options; for (let i = 0; i < options.length; i++) { if (options[i].value === this.selectedValue) { console.log(options[i].text); break; } } }, } 其中,this.$refs.select可以获取el-select组件的dom元素,options是一个数组,表示所有选的dom元素。我们可以通过遍历options数组,找到选中的value,然后获取对应的标签文本内容,即选中label。 以上就是el-select获取选中label的方法。需要注意的是,由于el-select是基于Element UI框架实现的,因此在使用时需要引入Element UI框架。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值