2023-06-25 vue中获取el-select 选中的label

参照 https://blog.csdn.net/m0_38038870/article/details/123418588

1.用Arry.find方法

<el-select v-model="value" placeholder="请选择" @change="getLabel">

    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">

  </el-option>

</el-select>

getLabel(value) {

    console.log(value);

      let obj = {};

      obj = this.options.find((item)=>{

          return item.value === value;

      });

      console.log(obj.label);

}

2.通过绑定原生click事件来进行传参

<el-select v-model="value" placeholder="请选择">

    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" @click.native="labelClick(item.label)">

    </el-option>

  </el-select>

labelClick(data){

  console.log(data);

}

3.通过 $refs 拿到 el-select 组件实例,该实例拥有 selectedLabel 属性,为当前选中的 label。

或者可以通过 selected 拿到选中的 option 的组件实例,拥有 label 和 value 两个属性。

<el-select ref="selectLabel" v-model="value" placeholder="请选择" @change="getLabel">

    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">

    </el-option>

getLabel(){

this.$nextTick(()=>{

  console.log(this.$refs.selectLabel.selectedLabel);

  console.log(this.$refs.selectLabel.selected.label);

})

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容