欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

elementUI select组件默认选中效果实现的方法

时间:2021-05-28 08:02:08|栏目:vue|点击:

首先,v-model的值为当前被选中的el-option的 value 属性值

需求:进入编辑页面,状态栏默认选中生效,如下显示:

html部分代码:

<el-form-item label="状态">
  <el-select v-model="form.status" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</el-form-item>

data的form中定义status属性:

再看data中options的定义,options为选择框中所有的可选内容,有label属性(某一项的名字)和value属性(某一项的具体的值),value才是我们需要的值,也是传到后端的值,而label是展示给用户看的值,重复一点:v-model的值为当前被选中的el-option的 value 属性值

options: [{
      value: '1',
      label: '生效'
    }, {
      value: '2',
      label: '失效'
    }],

因此,如果需要默认选中生效选项,需要把生效对应的value赋给el-select的v-model

上一篇:nuxt框架中对vuex进行模块化设置的实现方法

栏    目:vue

下一篇:vue中template的三种写法示例

本文标题:elementUI select组件默认选中效果实现的方法

本文地址:http://www.codeinn.net/misctech/130630.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有