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项目打包之开发环境和部署环境的实现

    vue项目打包之开发环境和部署环境的实现

    这篇文章主要介绍了vue项目打包之开发环境和部署环境的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue-prop父组件向子组件进行传值的方法

    vue-prop父组件向子组件进行传值的方法

    下面小编就为大家分享一篇vue-prop父组件向子组件进行传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3+vite+ts父子组件之间的传值

    vue3+vite+ts父子组件之间的传值

    随着vue2的落幕,vue3越来成熟,有必要更新一下vue3的父子组件之间的传值方式,这里介绍下vue3+vite+ts父子组件之间的传值方式实例详解,感兴趣的朋友一起看看吧
    2023-12-12
  • 代号为Naruto的Vue 2.7正式发布功能详解

    代号为Naruto的Vue 2.7正式发布功能详解

    这篇文章主要为大家介绍了代号为Naruto的Vue 2.7正式发布功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • element ui设置table自适应表格宽,不自动换行问题

    element ui设置table自适应表格宽,不自动换行问题

    这篇文章主要介绍了element ui设置table自适应表格宽,不自动换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue-Router在Vue2和Vue3中的使用示例详解

    Vue-Router在Vue2和Vue3中的使用示例详解

    这篇文章主要介绍了Vue-Router在Vue2和Vue3中的使用,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue-autoui自匹配webapi的UI控件的实现

    vue-autoui自匹配webapi的UI控件的实现

    这篇文章主要介绍了vue-autoui自匹配webapi的UI控件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue cli及Vue router实例详解

    Vue cli及Vue router实例详解

    vue-cli是vue官方出品的快速构建单页应用的脚手架,里面集成了webpack,npm,nodejs,babel,vue,vue-router,这篇文章主要介绍了Vue cli及Vue router详解,需要的朋友可以参考下
    2022-08-08
  • Vue3 携手 TypeScript 搭建完整项目结构

    Vue3 携手 TypeScript 搭建完整项目结构

    TypeScript 是JS的一个超级,主要提供了类型系统和对ES6的支持,使用 TypeScript 可以增加代码的可读性和可维护性,在 react 和 vue 社区中也越来越多人开始使用TypeScript,这篇文章主要介绍了Vue3 携手 TypeScript 搭建完整项目结构,需要的朋友可以参考下
    2022-04-04
  • vue中使用定义好的变量设置css样式详解

    vue中使用定义好的变量设置css样式详解

    vue项目中我们可以通过行内样式进行动态修改样式,下面这篇文章主要给大家介绍了关于vue中如何使用定义好的变量设置css样式的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03

最新评论