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 ...
随机推荐
- linux命令总结之dig命令
Dig简介: Dig是一个在类Unix命令行模式下查询DNS包括NS记录,A记录,MX记录等相关信息的工具.Dig的源码是ISC BIND大包的一部分,但是大多编译和安装Bind的文档都不把它包括在内 ...
- 区间DP的思路(摘自NewErA)及自己的心得
以下为摘要 区间dp能解决的问题就是通过小区间更新大区间,最后得出指定区间的最优解 个人认为,想要用区间dp解决问题,首先要确定一个大问题能够剖分成几个相同较小问题,且小问题很容易组合成大问题,从而从 ...
- spring 和 spring boot 的区别
最近越来越多的开发者都开始选择 spring-boot,与传统的 spring 相比,spring-boot又有哪些优势呢? 1.追求开箱即用的效果,只需要很少的配置就可以直接开始运行项目. 例如各种 ...
- python---方法解析顺序MRO(Method Resolution Order)<以及解决类中super方法>
MRO了解: 对于支持继承的编程语言来说,其方法(属性)可能定义在当前类,也可能来自于基类,所以在方法调用时就需要对当前类和基类进行搜索以确定方法所在的位置.而搜索的顺序就是所谓的「方法解析顺序」(M ...
- 视音频数据处理入门:FLV封装格式解析
===================================================== 视音频数据处理入门系列文章: 视音频数据处理入门:RGB.YUV像素数据处理 视音频数据处理 ...
- CSS3 box-sizing:border-box的好处
无论如何改动border,margin与padding的值,都不会导致box总尺寸发生变化.
- Redis学习六:Redis的持久化-AOF
AOF(Append Only File) 一.是什么 以日志的形式来记录每个写操作,将Redis执行过的所有写指令记录下来(读操作不记录),只许追加文件但不可以改写文件,redis启动之初会读取该文 ...
- dup()&dup2()
[dup()&dup2()] 都是复制文件描述符指针.dup2可以指定复制到哪一个新索引. 参考:http://hi.baidu.com/flikecn/item/e82e14bef06e8a ...
- [整理]LumiSoft.Net 开源组件
http://www.lumisoft.ee/lsWWW/download/downloads/Net/info.txt SVN: https://svn.lumisoft.ee:8443/svn/L ...
- HDU 1176 排列2 全排列
解题报告:给出四个数,然后要你把这四个数组合成的各不相同的四位数按照从小到大的顺序输出来,然后如果最高位是0的话不能输出来,还有最高位是数字如果一样的话,则放在同一行输出. 本来是个比较简单的生成全排 ...