秋葵好好吃 2022-10-20 10:20 采纳率: 33.3%
浏览 319
已结题

vue结合antd表格怎么展示一个嵌套多层的数组呢


dataSource: [{ key1: '第一列数据1', key2: [{ key3: '第二列数据1' }, { key3: '第二列数据2' }] }, { key1: '第一列数据2', key2: [{ key3: '第二列数据1' }, { key3: '第二列数据2' }] }]

上面这个嵌套了好几层的数组, 要怎么实现下图这个效果呢? 不能用嵌套子表格(也就是expandedRowRender), 必须是下图这种一模一样的效果
#vue #antd

img

  • 写回答

2条回答 默认 最新

  • 秋葵好好吃 2022-10-26 09:57
    关注

    最终是这样解决了
    要对数据做扁平化处理...

    <template>
      <div>
        <a-table :columns="columns" :data-source="newDataSource" bordered></a-table>
        <button @click="flat">
          点我
        </button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          dataSource: [
            {
              key1: "第一列数据1",
              key2: [{ key3: "第二列数据1" }, { key3: "第二列数据2" }],
            },
            {
              key1: "第一列数据2",
              key2: [{ key3: "第二列数据1" }, { key3: "第二列数据2" }],
            },
          ],
          columns: [
            {
              title: "第一列",
              dataIndex: "key1",
              customRender: (text) => {
                return { 
                    children:text.record.key1,
                    attrs: { rowSpan: text.record.titleSpan } 
                };
              },
            },
            {
              title: "第二列",
              dataIndex: "key3",
            },
          ],
          newDataSource: [],
        };
      },
    
      methods: {
        flat() {
          let arr = [];
          this.dataSource.map((arrItem) => {
            let type = true;
            const length2 = arrItem.key2.length; //key2数组的长度
            arrItem.key2.map((key2Item) => {
              arr = [
                ...arr,
                {
                  key1: arrItem.key1,
                  key3: key2Item.key3,
                  titleSpan: Number(`${type ? length2 : 0}`),
                  // twoSpan:index === 0 ? length2 : 0,
                },
              ];
              type = false;
              return arr;
            });
          });
          this.newDataSource = arr;
          console.log(this.newDataSource);
        },
      },
    };
    </script>
    
    <style lang="less" scoped></style>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 11月17日
  • 已采纳回答 11月9日
  • 创建了问题 10月20日

悬赏问题

  • ¥15 IDEA中圈复杂度如何具体设置
  • ¥50 labview采集不了数据
  • ¥15 请上面代码做什么处理或什么混淆
  • ¥15 英雄联盟自定义房间置顶
  • ¥15 W5500网线插上无反应
  • ¥15 如何用字典的Key,显示在WPF的xaml中
  • ¥15 weautomate读取Excel表格信息然后填写到网页一直报错,如何解决?
  • ¥15 C#如何在Webview2中获取网页验证码
  • ¥15 esp32烧录失败,具体情况在图片上
  • ¥15 selenium安装报错