使用 Element UI Select 组件的 value-key 属性,让绑定值可以为一个对象
当我们使用 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 属性,让绑定值可以为一个对象的更多相关文章
- element ui select组件和table做分页完整功能和二级联动效果
<template> <div class="index_box"> <div class="search_box"> &l ...
- [转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...
- element ui step组件在另一侧加时间轴显示
这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- 普通element ui table组件的使用
1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...
- Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
随机推荐
- Java面向对象笔记 • 【第4章 抽象类和接口】
全部章节 >>>> 本章目录 4.1 抽象类 4.1.1 抽象方法和抽象类 4.1.2 抽象类的作用 4.1.3 实践练习 4.2 final修饰符 4.2.1 final ...
- emqx的acl.conf使用
allow_anonymous=true就不说了,打开这个就像开了挂 现在讨论一下allow_anonymous=false,这样的话你会发现,client连接不上了 后来发现连接和权限 是两个事.. ...
- SpringCloud发现服务代码(EurekaClient,DiscoveryClient)
1.说明 本文介绍SpringCloud发现服务代码的开发, 通过使用EurekaClient,DiscoveryClient来发现注册中心的服务等, 从而可以自定义客户端对注册中心的高级用法. 2. ...
- Ranger架构剖析
Ranger介绍 2016年,Hadoop迎来了自己十周岁生日.过去的十年,Hadoop雄霸武林盟主之位,号令天下,引领大数据技术生态不断发展壮大,一时间百家争鸣,百花齐放.然而,兄弟多了不好管,为了 ...
- 基于GO语言实现的固定长度邀请码
1. 选取数字加英文字母组成32个字符的字符串,用于表示32进制数. 2. 用一个特定的字符比如`G`作为分隔符,解析的时候字符`G`后面的字符不参与运算. 3. LEN表示邀请码长度,默认为6. g ...
- css 基础 字体和文本样式
字体样式处理font-size:30px:// 设置字体大小 font-weight:700://设置粗体 font-sytle:italic; //设置文字斜体 font-family: 斜体,宋体 ...
- 第10组 Beta冲刺 (5/5)(组长)
1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14018671.html ·作业博客:https://edu.cnblogs.co ...
- Calendar日期往后一天,一月等
import java.util.Date ; Date date=new Date();//取时间 System.out.println(date.toString()); ...
- vue 自动生成菜单
import constant from './const' export function getRouters (files) { let filenames = files.keys() let ...
- HttpRunner3的用例是怎么运行起来的
在PyCharm中打开examples/httpbin/basic_test.py: 首先映入眼帘的是左上角那个绿色小箭头,点了一下,可以直接运行,意味着HttpRunner是能够直接被pytest驱 ...