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 ...
随机推荐
- vi的一些使用技巧
1.vi 编辑器中跳到文件的第一行:键盘按下 小写 gg vi 编辑器跳到文件最后一行:键盘按 shift + g (等于G) 跳转到当前行的第一个字符按0,跳转到当前行的最后一个字符按shift ...
- Python【读写Json文件】
indent=10:缩进10个空格
- python【数据类型:列表与元组】
python列表: 定义一个列表:cities=['北京','上海','广州','深圳'] 注意:列表的下标0表示第一个元素,下标-1表示最后一个元素 列表增加元素 在列表末尾添加一个元素:citie ...
- 抓包工具Charles
Charles Charles可以在windows,linux,mac各种操作系统上安装使用,它是java编写一款非免费工具:而fiddler只能在windows系统上使用 Charles抓包前,要确 ...
- P2657 [SCOI2009]windy数
P2657 [SCOI2009]windy数 题目描述 windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B ...
- P2776 [SDOI2007]小组队列
P2776 [SDOI2007]小组队列 题目背景 嘛,这道非常简单的给大家提供信心的省选题洛谷居然没有! 这么简单的题怎么可以没有! 给大家提升士气是义不容辞的责任! 所以我就来补一下啦.. 值得一 ...
- 豆瓣电影api
1.获取正在热映的电影: 接口:https://api.douban.com/v2/movie/in_theaters 访问参数: start : 数据的开始项 count:单页条数 city:城 ...
- 2017 清北济南考前刷题Day 2 morning
期望得分:100+30+60=190 实际得分:100+30+30=160 T1 最优方案跳的高度一定是单调的 所以先按高度排序 dp[i][j] 跳了i次跳到j 枚举从哪儿跳到j转移即可 #incl ...
- hihoCoder #1143 : 骨牌覆盖问题·一
#1143 : 骨牌覆盖问题·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 骨牌,一种古老的玩具.今天我们要研究的是骨牌的覆盖问题:我们有一个2xN的长条形棋盘,然 ...
- Sparse Filtering简介
当前很多的特征学习(feature learning)算法需要很多的超参数(hyper-parameter)调节, Sparse Filtering则只需要一个超参数--需要学习的特征的个数, 所以非 ...