ant-design-vue 多级表头处理

最新推荐文章于 2024-09-23 10:23:52 发布

又菜又不想学的小张

最新推荐文章于 2024-09-23 10:23:52 发布

阅读量634

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45108358/article/details/129688774

版权

要求：要显示这样的表格
在这里插入图片描述 注意:重要的是dataIndex的处理，不同颜色的订单数和回收数，对象key值可以{‘order+颜色’:122,'cover+颜色'：133}这样的格式进行显示

结构

 <a-table :dataSource="dataSource.list3" :columns="dataSource.columns" :pagination="false" :scroll="{ x: '100%' }"
      size="middle" />

数据

const dataSource = reactive({
  list2:[],
  list: [
    {
      color: "超级黑",
      sizes:[
        {
          size:'s',
          order:'超级黑+1',
          cover:'超级黑+11'
        },
        {
          size:'L',
          order:'超级黑+2',
          cover:'超级黑+22'
        },
        {
          size:'M',
          order:'超级黑+3',
          cover:'超级黑+33'
        },
      ]
    },
    {
      color: "蛋黄色",
      sizes: [
        {
          size:'s',
          order:'蛋黄蓝+1',
          cover:'蛋黄蓝+11'
        },
        {
          size:'M',
          order:'蛋黄蓝+2',
          cover:'蛋黄蓝+22'
        },
        {
          size:'L',
          order:'蛋黄蓝+3',
          cover:'蛋黄蓝+33'
        },
        {
          size:"XS",
          order:'蛋黄蓝+4',
          cover:'蛋黄蓝+44'
        }
      ]
    },
    {
      color: "黑白",
      sizes: [
        {
          size:'s',
          order:'黑白+1',
          cover:'黑白+11'
        },
        {
          size:'L',
          order:'黑白+2',
          cover:'黑白+22'
        },
        {
          size:'M',
          order:'黑白+3',
          cover:'黑白+33'
        },
        {
          size:"XS",
          order:'黑白+4',
          cover:'黑白+44'
        }
      ]
    },
  
  ],
  list3:[],

  columns: [
    {
      title: 'size',
      dataIndex: 'size',
      width: 100,
      align: 'center'
    }
  ]
})

数据处理

// 数据处理
const dataHand = () => {
  // 头部
  dataSource.list.forEach(item => {
    console.log(item)
    dataSource.columns.push({
      title: item.color,
      // dataIndex: Object.keys(item)[1],
      children: [
        {
          title: '订单数',
          align: 'center',
          dataIndex: 'order+'+ item.color
        },
        {
          title: '回收数',
          align: 'center',
          dataIndex: 'cover+'+ item.color
        }
      ]
    })
  });
  // 表格数据处理
  dataSource.list.forEach(item=>{
    item.sizes.forEach(v=>{
      dataSource.list2.push({
        size:v.size,
        ['order+'+item.color]:v.order,
        ['cover+'+item.color]:v.cover
      })
    })
  })
  dataSource.list3= Object.values(dataSource.list2.reduce((acc,cur)=>(Object.assign((acc[cur.size]||={}),cur),acc),[]))   //size相同的合并到一起
  console.log(dataSource.list2.reduce((acc,cur)=>(Object.assign((acc[cur.size]||={}),cur),acc),[]));
}