表格数据嵌套有数组有对象的转换拿到最后一级的数据

22 篇文章 0 订阅

模拟的数据,需要取到data中tableData的数据渲染到表格

 let data = [
      {
        a: '2016-05-03',
        b: 'Tom',
        c: 'No. 189, Grove St, Los Angeles',
        tableDataA: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',

          tableData: {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',

          tableData: {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          }
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',

          tableData: {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          }
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',

          tableData: {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
          }
        }]
      },
      {
        a: '2016-05-02',
        b: 'Tom',
        c: 'No. 189, Grove St, Los Angeles',
        tableDataA: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',

          tableData: {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 200 弄'
          }
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',

          tableData: {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 201 弄',
          }
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',

          tableData: {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 202 弄',
          }
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',

          tableData: {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 203 弄',
          }
        }]
      },
    ]

处理方法如下:

  this.tableData = data.map((v, idx) => ({
      ...v.tableDataA,
    }));

    this.tableData.map((item, index) => {
      Object.keys(item).map(key => {
        this.tableData1.push({
          key: item[key]
        })
      });

    });
    this.tableData = this.tableData1.map((v, idx) => ({
      ...v.key.tableData,
     
    }));

效果图

 代码可能不是最简单,如果有更好的方法,留言

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: layui数据表格可以展示嵌套数据,具体操作方法如下: 1. 定义数据模型:定义一个包含子级数据嵌套数据结构,如下所示: ``` { "id": 1, "name": "分类一", "children": [ { "id": 101, "name": "子分类一" }, { "id": 102, "name": "子分类二" } ] } ``` 2. 定义数据表格:在HTML页面中定义一个数据表格,并设置表格的列属性和数据源,如下所示: ``` <table id="table" lay-filter="table"></table> <script> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#table', cols: [[ {field:'id', title:'ID'}, {field:'name', title:'名称'}, {field:'children', title:'子分类', templet: '#childrenTpl'} ]], data: [/* 这里是数据源 */] }); }); </script> ``` 3. 定义子级数据模板:在HTML页面中定义一个用于展示子级数据的模板,并通过laytpl引擎实现渲染效果,如下所示: ``` <script type="text/html" id="childrenTpl"> {{# layui.each(d.children, function(index, item){ }} {{ item.name }} {{# }); }} </script> ``` 通过以上三个步骤,就可以实现在layui数据表格中展示嵌套数据的效果。同时,数据表格还支持自定义复杂的展示效果,例如树形数据展示、合并单元格等。 ### 回答2: Layui 是一个基于Web的前端开发框架,它完美支持数据表格的展示,还提供了一些实用组件,如弹框、日期选择器等。layui 数据表格可以嵌套展示数据,更加方便地展示相关数据,以下是关于 layui 数据表格展示嵌套数据的详细介绍。 Layui 数据表格支持多种数据格式,如果要嵌套展示数据,可以采用JSON格式,在 JSON 中使用数组来表示嵌套数据的结构,如下所示: ``` data = [ { id: 101, name: '张三', age: 25, sex: '男', address: { province: '广东', city: '深圳', district: '南山区' }, education: [ { school: '清华大学', major: '计算机科学与技术', degree: '本科' }, { school: '麻省理工学院', major: '计算机科学', degree: '硕士' } ] }, { id: 102, name: '李四', age: 27, sex: '女', address: { province: '江苏', city: '南京', district: '鼓楼区' }, education: [ { school: '浙江大学', major: '机械工程', degree: '本科' }, { school: '斯坦福大学', major: '管理学', degree: '硕士' } ] } ] ``` 在前端页面中,可以使用 layui 数据表格来展示这些嵌套数据。这里需要注意的是,如果想展示嵌套数据,需要修改列配置项中的 `templet` 属性,定义一个函数来处理渲染单元格。 ``` table.render({ elem: '#demo', cols: [[ {field: 'id', title: 'ID', width: 80}, {field: 'name', title: '姓名', width: 100}, {field: 'age', title: '年龄', width: 80}, {field: 'sex', title: '性别', width: 80}, {field: 'address', title: '地址', templet: function(d) { return d.address.province + ' ' + d.address.city + ' ' + d.address.district; }}, {field: 'education', title: '教育经历', templet: function(d) { var html = ''; layui.each(d.education, function(index, item) { html += item.school + ' ' + item.major + ' ' + item.degree + '<br>'; }); return html; }} ]], data: data }); ``` 这段代码中,定义了一个数据表格,其中 `cols` 是列配置项,定义了每一列的名称、宽度和数据绑定的字段。在定义“地址”列和“教育经历”列时,使用了 `templet` 属性,指定了一个函数来处理单元格的渲染。 对于“地址”列,渲染函数直接将地址对象中的省份、城市和区县组合成一个字符串来展示。 对于“教育经历”列,渲染函数使用了 layui 的 each 函数,遍历教育经历数组,逐个渲染出学校名称、专业和学位,并用换行符隔开,最后将所有内容拼合成一个字符串返回。 以上就是 layui 数据表格展示嵌套数据的基本方法,通过这种方式,可以在数据表格中方便地展示嵌套结构的数据。 ### 回答3: layui是一款基于jQuery的前端UI框架,使用方便,效果美观,功能强大,广受开发者喜爱。数据表格是layui框架中的一个重要组件之一,通常用于展示数据列表。在实际开发过程中,我们常常会遇到需要展示嵌套数据的场景,比如一个班级中有多名学生,每名学生又具有多项详细信息,此时我们可以通过layui数据表格来展示这些数据。 首先,我们需要在html页面中引入layui框架和数据表格模块的相关文件: ``` <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 接着,我们可以使用layui的数据表格组件来展示嵌套数据。具体步骤如下: 1. 定义数据表格的表头 表头是数据表格中的重要组成部分,它定义了每一列数据的名称、类型和宽度等属性。我们可以在html页面中定义好表头,并通过javascript代码动态生成数据表格。 ``` <table id="studentTable" class="layui-table"> <thead> <tr> <th>学生姓名</th> <th>性别</th> <th>出生日期</th> <th>联系电话</th> <th>详细信息</th> </tr> </thead> </table> ``` 2. 定义嵌套数据 在实际开发中,我们可能会从后端接口或数据库中获取到嵌套式的数据,例如一个班级中有多名学生,每名学生又分别具有多项详细信息。我们可以将这些数据定义为一个数组,其中每个元素代表一个学生。每个学生又包含一个名为detail的属性,该属性是一个对象,代表学生的详细信息。例如: ``` var data = [ { name: "李明", gender: "男", birthday: "2001-01-01", phone: "13800138000", detail: { height: 170, weight: 60, hobby: "篮球、足球、游泳" } }, { name: "张三", gender: "女", birthday: "2002-02-02", phone: "13900139000", detail: { height: 160, weight: 50, hobby: "音乐、旅游、阅读" } }, //... ] ``` 3. 生成数据表格 在定义好表头和嵌套数据之后,我们可以使用layui的数据表格组件来生成数据表格。生成数据表格的方法是调用layui.table.render()函数,该函数的参数包括一个object类型的参数,其中重要的属性包括elem、cols和data等。 ``` //定义表格列 var studentCols = [ { field: 'name', title: '学生姓名' }, { field: 'gender', title: '性别' }, { field: 'birthday', title: '出生日期' }, { field: 'phone', title: '联系电话' }, { field: 'detail', title: '详细信息', templet: '#detailTpl' } ]; //生成数据表格 layui.table.render({ elem: '#studentTable', cols: [studentCols], data: data }); ``` 在cols属性中,我们将之前定义好的表头列存储在一个名为studentCols的变量中,并将该变量作为cols属性的值传递给layui.table.render()函数。此外,在定义detail列的时候,我们使用了一个名为detailTpl的模板,用于展示详细信息的具体内容。这个模板是一个html代码片段,它定义了嵌套的详细信息如何展示。模板代码如下: ``` <script type="text/html" id="detailTpl"> <table class="layui-table layui-table-nob" lay-skin="line"> <tbody> <tr> <td>身高:{{d.detail.height}}cm</td> <td>体重:{{d.detail.weight}}kg</td> <td>爱好:{{d.detail.hobby}}</td> </tr> </tbody> </table> </script> ``` 在模板中,我们使用了{{d.detail.xxx}}的方式来输出学生的详细信息,其中d代表当前行的数据对象。 通过上述步骤,我们就可以使用layui数据表格展示嵌套数据了。在实际开发中,我们还可以通过其他的方式来控制表格的样式、分页、排序、筛选等属性,从而满足具体业务需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬加栤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值