在Vue.js中使用Element UI或Element Plus库时,可以通过多种方式从el-select组件中获取选中的label和value值。以下是几种常见的方法: 1. 通过组件实例直接获取(使用ref) 在模板中为el-select组件设置ref属性,然后在Vue实例中通过this.$refs访问该组件实例,进而获取选中的label和value。 示例代码: html <template...
通过$refs拿到el-select组件实例,该实例拥有selectedLabel属性,值为当前选中的label;也可以通过selected拿到选中的option的组件实例,拥有label和value两个属性。 代码如下: <template> <div> <el-select @change="touchOn" ref="labelRef" v-model="value" placeholder="请选择"> <el-option v-for="item in op...
我们在el-option渲染时,所设置的value属性值可以设置成label+value的形式,如下图 那么我们获取值时,直接获取el-select绑定的value即可, 获取后的值形式如下图,那么+号前面的就是想要的value值,后面的就是label值了,对返回的数据用split('+')进行切割,返回的数组索引0就是value值,数组索引1就是label值 这种方法...
:value="{ value: item.value, label: item.label}" 添加@change事件 <template> <el-select v-model="value" placeholder="请选择" @change="selectProductType"> <el-option v-for="item in options":key="item.value":label="item.label":value="{ value: item.value, label: item.label}"> </...
<el-select v-model="form.towerDeptName"placeholder="输入文字后选择"clearable @change="towerChange" > <el-option v-for="item in towerList":key="item.deptId":label="item.fullName":value="item"//注意这里对应change能获取的值></el-option> ...
要想获取value值很简单,直接提交表单,默认就是获取的value,但是现在还需要获取label的值,该如何获取呢? 思路分析: 给下拉列表添加改变**@change**事件,当option选项改变时触发,根据value值遍历数据源中的name即可。 解决方案: 1.添加<el-select>的@change事件。
{ id: 1, label: "香蕉", value: "banana" }, { id: 2, label: "橙子", value: "orange" }, ], }; }, 二.方法 1.通过ref的形式(推荐) 在进行el-select渲染时,给el-select添加一个ref,用于获取值 然后就可以在点击事件或者提交表单时获取到选中的值了 ...
<el-selectv-model="form.towerDeptName"placeholder="输入文字后选择"clearable @change="towerChange"><el-option v-for="item in towerList":key="item.deptId":label="item.fullName":value="item"//注意这里对应change能获取的值></el-option></el-select>towerChange(e){//获取的值和idthis.form....
{ id: 1, label: "香蕉", value: "banana" }, { id: 2, label: "橙子", value: "orange" }, ], }; }, methods: { showoptions() { console.log( this.$refs.optionRef.selected.value, this.$refs.optionRef.selected.label );
el-select获取选中的value和label selectGetFn(val) {if(this.multipleFlag) {for(let i = 0; i < GUIDArr.length; i++) { let obj = this.serviceStaffs.find(item => { return item.value === val; }); consolo.log(obj.value+","+obj.label);...