Vue el-select 获取label值

Vue el-select 获取label值

在HTML中设置el-select

<el-select style="width:80%;" v-model="chVal" placeholder="" @change="chChange">
	<el-option
	    v-for="item in chOptions"
	    :key="item.id"
	    :label="item.chname"
	    :value="item.chid">
	el-option>
el-select>

在el-select的值发生变化时，获取选中的item（即obj），chOption–下拉框绑定的数据，item.chid–value绑定的值

// An highlighted block
chChange(val){
    var obj = {};
    obj = this.chOptions.find(item =>{
        return item.chid === val 
    });
    // console.log(obj.chname)
    this.editMessage.chname = obj.chname
},

更新一个方法

<el-select style="width:80%;" v-model="chVal" @change="chChange" ref="selectCh">
	<el-option
	    v-for="item in chOptions"
	    :key="item.id"
	    :label="item.chname"
	    :value="item.chid">
	el-option>
el-select>

select_handler_province() {
   // 在数据变化之后等待 Vue 完成更新 DOM ，再执行
    Vue.nextTick(() => {
        console.log(this.$refs.selectCh.selectedLabel);
        console.log(this.$refs.selectCh.selected.label);
    });
}