elementui el-select 获取value和label 以及 对象的方法

获取 el-select 的 value 和 label 值

在 Element UI 的 el-select 组件中,可以通过以下方法获取选项的 value 和 label 值。

1、绑定 v-model 获取 value

el-select 通常通过 v-model 绑定 value 值,直接访问绑定的变量即可获取当前选中的 value。

html 复制代码
 <el-select
          v-model="company"
          @change="companyChange"
          clearable
          filterable
          reserve-keyword
          style="width: 300px">
          <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>

通过 change 事件获取 label

javascript 复制代码
const list = ref([ { id: '1', name: '选项1' },
      { id: '2', name: '选项2' }
])
 
 const companyChange=(value:string)=> {
    console.log(value); // 输出当前选中的 value

    var name = list.value.filter(item=>ite.id === value)[0].name //  输出当前选中的label
  }
 

select 初始化

javascript 复制代码
const initSelect=()=>{
  // id 为需要选中的选项id
  company.value = id
}
2、使用 value-key 获取整个对象

如果选项数据是对象而非简单值,可以设置 value-key 绑定整个对象。

html 复制代码
  <el-select
          v-model="company"
          clearable
          filterable
          @change="changeCompany"
          style="width: 300px"
          >
           <el-option v-for="item in mTenantList" :key="item.tenantId" :label="item.enterpriseName" :value="{value:item.tenantId,label:item.enterpriseName}"> </el-option> 
        </el-select>
javascript 复制代码
const list = ref([ { id: '1', name: '选项1' },
      { id: '2', name: '选项2' }
])
 
 const companyChange=(value:string,label:string)=> {
    console.log(value); // 输出当前选中的 value
    console.log(label); // 输出当前选中的 value
  }
 

这里发现初始化问题!无法设置selelct 选中!

相关推荐
非凡ghost1 天前
Subtitle Edit(字幕编辑软件) 中文绿色版
前端·javascript·后端
用户84298142418101 天前
10个JavaScript编程实用技巧
javascript
扎瓦斯柯瑞迫1 天前
cursor: 10分钟魔改环境、优雅获取Token
前端·javascript·后端
wuxingxi1 天前
现代化企业级H5模板:Vite + Vue 3 + TypeScript 开箱即用
vue.js
Violet_YSWY1 天前
将axios、async、Promise联系在一起讲一下&讲一下.then 与其关系
开发语言·前端·javascript
San301 天前
扩展卡片效果:用 Flexbox 和 CSS 过渡打造惊艳交互体验
前端·javascript·css
asdfsdgss1 天前
Axure 组件不用手绘:ElementUI/Plus 元件库 + 大厂规范现成资源
elementui·axure·photoshop
写代码的皮筏艇1 天前
JS数据类型转换
前端·javascript
Qinana1 天前
🌟 从 CSS 到 Stylus:打造更优雅、高效的样式开发体验
前端·javascript·css
Joker`s smile1 天前
vue + elementUI 实现特殊字符(上标、下标、特殊符号等)输入框
vue.js·elementui·特殊字符·unicode字符·上标·下标