element中el-select的使用及说明

更新时间：2023年01月16日 09:14:52 作者：奥特蛋_mm

这篇文章主要介绍了element中el-select的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

element中el-select的使用

如下图所示，要实现select下拉选择，当前工作内容绑定的值为表单中的jobId，显示的值为工作内容 jobName

  <el-select v-model="staffForm.jobId" placeholder="请选择" @focus="getJobs">
            <el-option
              v-for="item in staffJobs"
              :key="item.jobId"
              :label="item.jobName"
              :value="item.jobId"/>
          </el-select>

value为select绑定的值

label 为select选中框内显示的值

若不设置 label则显示的值为select绑定的值，即value

VUE & Element UI el-select undefined

VUE & Element UI

el-select 组件通过 change 绑定获取 optnion 值 Bug 永远返回 undefined，通过 option 绑定 click.native 解决；

<el-form-item label="编号ID" prop="snId">
          <el-select
            v-model="form.snId"
            value-key="id"
            placeholder="请选择产品"
            filterable
            remote
            :remote-method="remoteQuerySnIdSelect"
            @blur="selectSnIdSelectBlur"
          >
            <el-option
              v-for="item in snIdOptions"
              :key="item.id"
              :label="item.product"
              :value="item.inSn"
              @click.native="changeSnIdSelect(item)"
            ></el-option>
          </el-select>
        </el-form-item>

Element UI Form Input 使用 el-col 来调整某些项目为两列，

直接通过 el-col 包含元素会导致元素不能操作；必须将el-col 放置到 el-row 标签内；

el-row el-col

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

全面解析vue router 基本使用(动态路由，嵌套路由)
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。这篇文章主要介绍了vue router 基本使用 ,需要的朋友可以参考下
2018-09-09
vue实现打印功能的两种方法
这篇文章主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下
2018-09-09
vue3.x项目降级到vue2.7的解决方案
Vue2.7是Vue2.x的最终次要版本,下面这篇文章主要给大家介绍了关于vue3.x项目降级到vue2.7的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
vue+element ui实现锚点定位
这篇文章主要为大家详细介绍了vue+element ui实现锚点定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
elementUI el-input 只能输入正整数验证的操作方法
这篇文章主要介绍了elementUI el-input 只能输入正整数验证,本文给大家详细讲解对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-11-11
Vue Element Sortablejs实现表格列的拖拽案例详解
这篇文章主要介绍了Vue Element Sortablejs实现表格列的拖拽案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
如何利用vue实现css过渡和动画
过渡Vue在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果这篇文章主要给大家介绍了关于如何利用vue实现css过渡和动画的相关资料,需要的朋友可以参考下
2021-11-11
如何快速上手Vuex
本文主要介绍了Javascript中Vuex的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
vue+elementui实现动态添加行/可编辑的table
这篇文章主要为大家详细介绍了vue+elementui实现动态添加行/可编辑的table，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
vue中动态路由加载组件,找不到module问题及解决
这篇文章主要介绍了vue中动态路由加载组件,找不到module问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06