EsunR 2019-11-07 12:14:42  12264  收藏 6
分类专栏: Vue 文章标签: element-ui

当我们使用 Elemet UI 的选择组件进行多选时,Select 组件的绑定值是一个数组,但是数组的值只能传入 Number 类型或者 String 类型的数据,如果我们想向其中传入一个对象就会出错,如:

<template>
<el-select v-model="permissionList" multiple placeholder="请选择">
<el-option v-for="item in groups" :key="item.groupID" :label="item.name" :value="item" />
</el-select>
</template> <script>
export default{
data() {
return {
permissionList: [],
groups: [{
id: 1,
name: 'A组',
permission: 'Write'
},{
id: 2,
name: 'B组',
permission: 'Write'
},{
id: 3,
name: 'C组',
permission: 'Write'
}]
}
}
}
</script>

但是这样组件在选择的时候就会出错:

同时,控制台报错:

vue.runtime.esm.js:619 [Vue warn]: <transition-group> children must be keyed: <ElTag>
  • 1

我们可以发现其为缺少一个索引,翻查 elemnet-ui 的文档,可以查阅到 Select 组件有一个属性:


那么,我们可以为其添加一个索引的属性,这个 value-key 即为我们绑定对象的唯一标识符,如在上述的例子中,这个标识符为 groupID

所以可以将上面的代码改动为:

<template>
<el-select
v-model="permissionList"
multiple
placeholder="请选择"
+ value-key="groupID"
>
<el-option v-for="item in groups" :key="item.groupID" :label="item.name" :value="item" />
</el-select>
</template>

使用 Element UI Select 组件的 value-key 属性,让绑定值可以为一个对象的更多相关文章

  1. element ui select组件和table做分页完整功能和二级联动效果

    <template> <div class="index_box"> <div class="search_box"> &l ...

  2. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  3. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

  4. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  5. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  6. 普通element ui table组件的使用

    1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

  7. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

  8. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  9. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

随机推荐

  1. Java面向对象笔记 • 【第4章 抽象类和接口】

    全部章节   >>>> 本章目录 4.1 抽象类 4.1.1 抽象方法和抽象类 4.1.2 抽象类的作用 4.1.3 实践练习 4.2 final修饰符 4.2.1 final ...

  2. emqx的acl.conf使用

    allow_anonymous=true就不说了,打开这个就像开了挂 现在讨论一下allow_anonymous=false,这样的话你会发现,client连接不上了 后来发现连接和权限 是两个事.. ...

  3. SpringCloud发现服务代码(EurekaClient,DiscoveryClient)

    1.说明 本文介绍SpringCloud发现服务代码的开发, 通过使用EurekaClient,DiscoveryClient来发现注册中心的服务等, 从而可以自定义客户端对注册中心的高级用法. 2. ...

  4. Ranger架构剖析

    Ranger介绍 2016年,Hadoop迎来了自己十周岁生日.过去的十年,Hadoop雄霸武林盟主之位,号令天下,引领大数据技术生态不断发展壮大,一时间百家争鸣,百花齐放.然而,兄弟多了不好管,为了 ...

  5. 基于GO语言实现的固定长度邀请码

    1. 选取数字加英文字母组成32个字符的字符串,用于表示32进制数. 2. 用一个特定的字符比如`G`作为分隔符,解析的时候字符`G`后面的字符不参与运算. 3. LEN表示邀请码长度,默认为6. g ...

  6. css 基础 字体和文本样式

    字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...

  7. 第10组 Beta冲刺 (5/5)(组长)

    1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14018671.html ·作业博客:https://edu.cnblogs.co ...

  8. Calendar日期往后一天,一月等

    import java.util.Date ;       Date date=new   Date();//取时间 System.out.println(date.toString());     ...

  9. vue 自动生成菜单

    import constant from './const' export function getRouters (files) { let filenames = files.keys() let ...

  10. HttpRunner3的用例是怎么运行起来的

    在PyCharm中打开examples/httpbin/basic_test.py: 首先映入眼帘的是左上角那个绿色小箭头,点了一下,可以直接运行,意味着HttpRunner是能够直接被pytest驱 ...