element-ui 2.7.2版本使用 表格展开行 功能遇到的奇葩问题?
在使用 element-ui 2.7.2版本的时候报下面的错误:
[Vue warn]: Error in callback for watcher "data": "Error: if there's nested data, rowKey is required."
表面的意思是如果有嵌套的数据,需要在el-table标签中新增row-key字段。查阅文档element-ui 2.7.0 增加对树形结构数据的支持 ,而row-key是针对支持树类型的数据。
而我需要的是展开行这个功能?
已下面这个为例反复实现了几次:
<el-table :data="tableData"></el-table>
当tableData数据格式为以下形式时使用表格展开行功能,无任何问题
tableData: [{
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
}]
当tableData数据格式为以下形式会出现上面的报错:
tableData: [{
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
children:[{
name:'土鸡蛋',
desc:'美味...'
}]
}]
问题就出现在key为children名字上,如果换成其他命名不会报错。。。。
如下可使用array.map函数处理下数据就可以解决问题了。。。
let handleData = tableData.map(item => {
return {
name: item.name,
category: item.category,
desc: item.desc,
childrens: item.children
};
});
element-ui 2.7.2版本使用 表格展开行 功能遇到的奇葩问题?的更多相关文章
- element-ui table表格展开行每次只能展开一行
https://www.jianshu.com/p/a59c22202f2c <template> <el-table @expand-change="expandSele ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
- element ui table(表格)点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
- 【vue-waring】element UI 由版本1.4.12 升级到element-ui@2.0.10
遇到的问题:element UI 由版本1.4.12 升级到element-ui@2.0.10 cnpm run dev 运行后的waring 状态:解决(相关资料的方法对我没什么用) 解决 ...
- element ui table 导出excel表格
https://blog.csdn.net/u010427666/article/details/79208145 vue2.0 + element UI 中 el-table 数据导出Excel1. ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
随机推荐
- ppp协议介绍(转)
原文:https://www.cnblogs.com/gtarcoder/p/6259105.html PPP协议PPP协议是二层(数据链路层)协议,常用于拨号上网时客户端向服务器获取IP地址.PPP ...
- python基础之模块之序列化
---什么是序列化(picking)? 我们把变量从内存中变成可存储或传输的过程称之为序列化. 序列化之后,就可以把序列化后的内容写入磁盘,或者通过网络传输到别的机器上. 反过来,把变量内容从序列化的 ...
- sql server 日志文件占用过多空间
问题描述: 在sql server的log文件夹中存在大量的mdmp.log文件,整体占用了几十个G C:\Program Files (x86)\Microsoft SQL Server\MSSQL ...
- vue 脚手架使用
1. npm指令 vue init 模板类型 项目名称 如: vue init webpack-simple mydemo 2.进入刚才生产的 文件夹 mydemo cd mydemo 3.初始化 ...
- SXOI2018 游记
noilinux@Capella:~$ cd /Memories/ noilinux@Capella:/Memories$ rm *SXOI* rm:是否删除有写保护的普通文件 "SXOI2 ...
- Java并发编程原理与实战八:产生线程安全性问题原因(javap字节码分析)
前面我们说到多线程带来的风险,其中一个很重要的就是安全性,因为其重要性因此,放到本章来进行讲解,那么线程安全性问题产生的原因,我们这节将从底层字节码来进行分析. 一.问题引出 先看一段代码 packa ...
- 20145209 2016-2017-2 《Java程序设计》第7周学习总结
20145209 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 read()每次读入一个字节. eg:short2个字节,2=0x0201,读入后要0x & ...
- 创建分区swap分区
1.将文件系统卸载 #umount /sdc5 2.创建swap分区 #mkswap /dev/sdc5 3.激活swap分区 #swapon -a /dev/sdc5 4.查看swap分区情况 #s ...
- Xor Sum(HDU4825 + 字典树)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4825 题目: 题意: 先给你n个数,再进行q次查询,每次查询数s与原来给的n个数异或和最大的数. 思 ...
- weblogic 反序列化补丁绕过漏洞的一个批量检测shell脚本(CVE-2017-3248 )
~ 以下内容,仅供学习参考 ~ weblogic 反序列化补丁绕过漏洞已经出了两个月了,balabala ~~~ 废话不说,拿到该漏洞的利用工具weblogic.jar,但只能一个个检测ip和端口,效 ...