首页 > 其他分享 >el-select获取选中label值

el-select获取选中label值

时间:2022-09-29 08:45:10浏览次数:54  
标签:el console log value label 选中 select

原文链接: 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);
})
}

标签:el,console,log,value,label,选中,select
From: https://www.cnblogs.com/fswhq/p/16740191.html

相关文章

  • WPF 已知问题 Popup 失焦后导致 ListBox 无法用 MouseWheel 滚动问题和解决方法
    本文记录在Popup失焦后导致ListBox无法用MouseWheel滚动问题原因:Popup虽然是个完整独立的窗体,但它的激活要靠它的“父窗口”间接来激活,这里之所以说是“父窗口”,是......
  • 关于PHP的webshell免杀小结
    0X00普通的一句话木马(适用于CTF和小站)<?phpeval($_POST['a']);?>//函数的相似替换<?phpassert($_POST['a']);?><?php@eval($_POST['110']);?>与第一个一句话木马......
  • powershell 检查电脑指定软件安装情况
    `#1获取当前日期$collect_date=Get-Date-Format"yyyy-MM-ddHH_mm"2获取计算机主机名$ComputerName=hostname3定义需要查询的软件名称$AppDisplayName="Anyshar......
  • 2022/9/27 整合thymeleaf渲染首页
     商品首页与商品检索页开发1.微服务架构1)动静分离用户访问所有请求,全部先访问nginx,nginx做为反向......
  • 【element UI】el-cascader 组件使用过程踩坑记录
    前言项目中使用到el-cascader组件,记录下遇到的一些问题以及解决方法,方便后续回顾查看。样式问题我是使用按需引入的elementUI,当使用到el-cascader组件时,下拉框里......
  • MainActivity 与 Fragment 之间使用 ViewModel 通信
    创建ViewModel类日期选择器的结果保存到ViewModel,在MainActivity中获取ViewModel更新之后的值,再把值重新渲染到UI上。publicclassTimePickerViewModelextend......
  • 【WPF 】ItemTemplateSelector模板选择器
    WPF的ItemsControl数据绑定中,有时会遇到绑定的数据源是多种类型,并且需要对不同类型使用不同的模板。这个时候就需要用到 ItemTemplateSelector。ItemTemplateSelector......
  • element-ui 上传文件后点击图片实现预览效果
    背景在我们上传文件后我们希望点击文件实现预览效果进行确认或者其他操作。方式1:可以使用element-ui的upload组件+dialog+image组件解决,示例代码如下:<el-uploada......
  • Powershell ExecutionPolicy 执行策略
    简单说明:powershell对于脚本的执行有着严格的安全限制Get-ExecutionPolicy-List#查看当前的执行策略Set-ExecutionPolicy-ScopeCurrentUserRemoteSigned#设置执行策略......
  • shell特殊符号下
    ####$变量前缀,正则里面表示行尾#!$是一个组合#~用户家目录,正则表达式表示匹配符#&放到命令后面,会把命令丢到后台#[指定字符中的一个,[0-9],[a-zA-Z],[abc]#;多条命令写......