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 选中!

相关推荐
知识分享小能手19 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
蓝莓味的口香糖20 小时前
【JS】什么是单例模式
开发语言·javascript·单例模式
reembarkation21 小时前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
Roye_ack1 天前
【项目实战 Day9】springboot + vue 苍穹外卖系统(用户端订单模块 + 商家端订单管理模块 完结)
java·vue.js·spring boot·后端·mybatis
gerrgwg1 天前
React Hooks入门
前端·javascript·react.js
汉字萌萌哒1 天前
【 HTML基础知识】
前端·javascript·windows
北城以北88881 天前
Vue--Vue基础(二)
前端·javascript·vue.js
FuckPatience1 天前
Vue 组件定义模板,集合v-for生成界面
前端·javascript·vue.js
有梦想的攻城狮1 天前
从0开始学vue:vue和react的比较
前端·vue.js·react.js
silent_missile1 天前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js