ElementUI ===＞ select 同时获取 value 和 label 的值

普罗旺斯.

已于 2022-09-12 23:18:09 修改

阅读量234

点赞数

分类专栏：前端文章标签： javascript

于 2021-10-10 19:51:58 首次发布

本文链接：https://blog.csdn.net/qq_42700109/article/details/120691073

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这段代码展示了在Vue.js中如何使用el-col和el-form-item创建一个选择应用类型的下拉菜单，并通过appTypeChange方法处理选中值的变化。在下拉菜单中，每个选项都由el-option组件动态生成，绑定到appTypeData数据源。当用户选择一个值时，会弹出警告显示所选值，并找到匹配的dictDataName属性对应的名称。

摘要由CSDN通过智能技术生成

<el-col :sm="12">
  <el-form-item label="应用类型:" prop="dictDataName">
    <el-select
      v-model="form.dictDataName"
      class="ele-block"
      @change="appTypeChange"
      placeholder="请选择应用类型">
      <el-option v-for="item in appTypeData"
                 :key="item.dictDataId"
                 :label="item.dictDataName"
                 :value="item.dictDataId"/>
    </el-select>
  </el-form-item>
</el-col>

appTypeChange(selVal){
  alert(selVal)
  let obj = {}
  obj = this.appTypeData.find((item)=>{//这里的userList就是上面遍历的数据源
    return item.dictDataId === selVal;//筛选出匹配数据
  });
  let labelData = obj.name;
  alert(labelData )
},