AntDesignVue 重复表格处理

示例截图：

 思路：

后端接口按天返回数据，即：[{time:'2022-10-11',temp:24,actualTemp:21},{},{}]

需要处理成每3个数据一组的二维数组，利用antdVue，table组件的dataIndex设成数组形式

具体代码：

let titleList = [
  {
    title: "日期",
    col: "dateTime",
  },
  {
    title: "预报天气",
    col: "temperature",
  },
  {
    title: "实际天气",
    col: "actualTemperature",
  },
];
const setTableData = (weather=[]) => {
  let result = [];
  let column = [];
  let columnLen = titleList.length;
  let gap = formPagination.value.pageSize / 3; // 一共多少行
  for (let i = 0; i < gap; i++) {
    let arr = weather.filter((item, index) => index % gap == i);
    if (arr.length > 0) {
      result.push(arr);
    }
  }
  let line = Math.ceil(weather.length / gap);
  column = Array.from({ length: line * columnLen }).map((i, k) => {
    let currTitle = titleList[k % columnLen];
    return {
      title: currTitle.title,
      dataIndex: [Math.floor(k / columnLen), currTitle.col],
      key: currTitle.col
    };
  });
  dataSource.value = result;
  if (weather.length > 0) {
    columns.value = column;
  }
};

处理后数据结构：