关于elementUI select控件绑定多个值(对象)

目录
  • elementUI select控件绑定多个值
  • el-select绑定多个值id、value
  • 总结

elementUI select控件绑定多个值

通常使用的时候v-model都是绑定一个值，这样没有问题，但在某些需求中会获取选择项的多个值。

那么v-model就需要绑定一个对象，e饿了么的官网说明了绑定对象的时候必须绑定value-key值，否则会出现选择项无法改变的情况。

value-key可以使用选择项中的值。

当时没有看文档的时候，自己也想了一个办法，就是绑定选择项的索引值，然后到对应的nameList数组中取出对应的项也可以。

el-select绑定多个值id、value

el-select通常v-model绑定一个form的表单属性，但是在给后台传值的时候，往往在选择了以后，不仅要传name也要传id，所以需要考虑其他办法。

原v-model绑定方法：选中的值绑定form.serviceTypeName，但无法获取id

<el-form-item label="项目分类" prop="serviceTypeName">
    <el-select v-model="form.serviceTypeName" placeholder="请选择">
        <el-option
            v-for="item in classifiyOptions"
            :key="item.serviceTypeId"
            :label="item.serviceTypeName"
            :value="item.serviceTypeName"
         />
     </el-select>
</el-form-item>

改进方法：通过绑定index，@input绑定事件作用于多个值

改进后：

<el-form-item label="项目分类" prop="serviceTypeName">
    <el-select 
        v-model="form.serviceTypeName"
        @input="selectChangeParent"
        placeholder="请选择"
     >
         <el-option
             v-for="(item, index) in classifiyOptions"
            :key="index"
            :label="item.serviceTypeName"
            :value="index"
         />
    </el-select>
</el-form-item>

selectChangeParent方法:

// 新增绑定id函数
    selectChangeParent(index) {
      this.form.serviceType = this.classifiyOptions[index].serviceTypeId;
      this.form.serviceTypeName = this.classifiyOptions[index].serviceTypeName;
    },

这样就实现了select组件绑定多个值：id和name

总结

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

赞 (0)

相关推荐

  • elementUI select组件value值注意事项详解

    elementUI select组件value值注意事项详解

    select组件的使用方式就不细说,可查看select组件使用方式 主要要说一下注意事项: select组件可以动态生成option选项,option选项绑定对应的文本值和value值. 有时候我们发现 默认显示的内容会显示具体的value值而不是对应的文本,这种情况原因都是: v-model绑定的值与option选项value值类型不符, 常规就是number与string 通用我们会循环一个数组.对象生成option选项 1.简单数组 const array1=[1,2,3] <el-sel

  • 关于element-ui select 下拉框位置错乱问题解决

    关于element-ui select 下拉框位置错乱问题解决

    目录 element-ui select 下拉框位置错乱 element-ui使用时的一些坑点总结 1.el-select 下拉框绑定值为对象时选中值显示错乱 2.局部覆盖element-ui的默认样式 3.el-form 标签绑定data中的form时候 element-ui select 下拉框位置错乱 今天写bug时 ,突然发现个element下拉框的样式出现错乱,折腾了大半个小时总算搞定了,这里分享下. 先上错乱图 看上图,正常情况下下拉选项应该贴着select框的,而此时两者相隔甚远

  • 关于elementUI select控件绑定多个值(对象)

    目录 elementUI select控件绑定多个值 el-select绑定多个值id.value 总结 elementUI select控件绑定多个值 通常使用的时候v-model都是绑定一个值,这样没有问题,但在某些需求中会获取选择项的多个值. 那么v-model就需要绑定一个对象,e饿了么的官网说明了绑定对象的时候必须绑定value-key值,否则会出现选择项无法改变的情况. value-key可以使用选择项中的值. 当时没有看文档的时候,自己也想了一个办法,就是绑定选择项的索引值,然后到

  • 浅析Bootstrip的select控件绑定数据的问题

    此问题让我倒弄了一下午时间,最后终于被我拿下.下面小编把我的功劳分享出来,以此来做个备份,同时也希望能帮助到大家. 具体详情如下所示: $(function(){ var stu_no = freeUrl(); var data, subname="",data2; var sbList = new Array(); $.ajax({ async: false , dataType: "json", contentType: "application/js

  • element-ui select多选绑定回显值问题

    目录 element-ui select多选绑定回显值 element-ui下拉多选数据回显时无法进行修改 解决方案 总结 element-ui select多选绑定回显值 这是要最后实现的效果. <el-form-item label="机组名称" prop="unitName"> <el-select v-model="unitName" multiple placeholder="请选择" @chang

  • 学习vue.js表单控件绑定操作

    本文实例为大家分享了vue.js表单控件绑定的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件绑定</title> </head> <body> <!-- v-model在表单控件元素上实现数据的双向绑定 -->

  • Vue 表单控件绑定的实现示例

    本文介绍了Vue 表单控件绑定的实现示例,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text&qu

  • Vue.js事件处理器与表单控件绑定详解

    事件处理主要通过v-on这个指令来执行. 事件监听及方法处理 1.简单的可以直接内嵌在页面. 2.可以通过将方法定义在methods中,然后再v-on中执行 3.可以通过绑定给函数传递参数,还可以传递通过变量$event给函数传递原生DOM事件. <div id="app-1"> <button v-on:click="counter += 1">增加1</button> <p>这个按钮被点击了{{counter}}&

  • DropDownList控件绑定数据源的三种方法

    本文给大家分享web  中 DropDownList绑定数据源的几种方式,先给大家分享三种常见的方式,具体详情如下所示:  第一种 this.ddltype.DataTextField = "btName";//显示的值 this.ddltype.DataValueField = "btId";//获取dropdownlist中的值 ddltype.DataSource = service.GetBusinessTypeAll(""); this

  • C#开发WinForm清空DataGridView控件绑定的数据

    C#开发WinForm清空DataGridView控件绑定的数据

    使用DataGridView控件绑定数据后有时需要清空绑定的数据,在清除DataGridView绑定的数据时: 1.设置DataSource为null this.dgvDemo.DataSource = null 这样虽然可以清空DataGridView绑定的数据,但是DataGridView的列也会被删掉. 2.用DataGridView.Row.Clear() this.dgvDemo.Rows.Clear() 使用这种方法会报错,提示“不能清除此列表”,报错信息如下: 以上两种方法都不是想

  • .Net使用XtraGrid控件绑定数据

    目录 设计数据源并绑定字段: 表格数据与数据源的数据同步 新增一条记录,添加行 删除选中行 获取选定行,指定列单元格的内容 Get/Set 单元格的值 选中行改变绑定行数据到对应控件中 1.判断是否有Focused行 2.获取Focused行 3.获取Focused行单元格的值 动态添加列 添加非绑定列 编辑器 添加按钮列 数据验证 1.使用RepositoryItem.Validating事件 2.使用 GridView.ValidatingEditor 事件 3.使用 GridView.Va

  • js+CSS实现模拟华丽的select控件下拉菜单效果

    js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

随机推荐