在使用 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版本使用 表格展开行 功能遇到的奇葩问题?的更多相关文章

  1. element-ui table表格展开行每次只能展开一行

    https://www.jianshu.com/p/a59c22202f2c <template> <el-table @expand-change="expandSele ...

  2. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  3. element ui table(表格)点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  4. 【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 状态:解决(相关资料的方法对我没什么用) 解决 ...

  5. element ui table 导出excel表格

    https://blog.csdn.net/u010427666/article/details/79208145 vue2.0 + element UI 中 el-table 数据导出Excel1. ...

  6. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  7. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  8. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  9. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

随机推荐

  1. insert tp5.1

    $insertId = Db::name('user_address')->insertGetId($data); 会插入数据,返回插入的 id //$flag = Db::name('user ...

  2. 秋色园QBlog技术原理解析:性能优化篇:缓存总有失效时,构造持续的缓存方案(十四)

    转载自:http://www.cyqdata.com/qblog/article-detail-38993 文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文 ...

  3. 用canvas绘制验证码

    在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破. 验证码一般用PHP和java等后端语言编写: 但是在前端,用canva或者SV ...

  4. SVN不能提交代码

    Error: Some resources were not reverted. Attempted to lock an already-locked dir svn: Working copy ' ...

  5. 脑洞 博弈 E. Competitive Seagulls 2017 ACM Arabella Collegiate Programming Contest

    题目链接:http://codeforces.com/gym/101350/problem/E 题目大意:给你一个长度为n的方格,方格上面都被染色成了白色.每次染色都是选择白色的,假设目前选择的这块白 ...

  6. C#_连接数据库实现 登录注册界面

    //编写登录界面逻辑 using System; using System.Collections.Generic; using System.ComponentModel; using System ...

  7. 2016-2017-2 《Java程序设计》第七周学习总结

    20155313 2016-2017-2 <Java程序设计>第七周学习总结 第十二章 Lambda 12.1认识Lambda语法 12.1.1Lambda语法概览 在java中引入了La ...

  8. 小程序web-view wx.miniProgram.postMessage 坑记录

    web-view吧,其实微信官方应该是非常不支持在小程序上嵌套web的,它希望你直接用小程序上的代码,而放弃web的实现,当然,也是为了防止用小程序去嵌套别的广告页面.所以官方对web-view的操作 ...

  9. 让PHPCms内容页支持JavaScript_

    在PHPCms内容页中,出于完全考虑,默认是禁止JavaScript脚本的,所以我们在添加文章时,虽然加入了js代码,但实际上并没有起作用,而是以文本形式显示.如果要让内容页支持JavaScript, ...

  10. SQL Server 将Id相同的字段合并,并且以逗号隔开

    例如:有表MO_Cook,字段:FoodRoom,name   有如下数据: 要求:将FoodRoom中值相同的字段合并成一行,并将name的值用逗号隔开. 需要用到:STUFF函数. 查询语句如下: ...