avue里面表格列合并

接手别人的项目一个不爽的地方就是，人家用习惯的组件在你这里可能就没有用过

这个月接手供应商做的一个模块，一打开用的avue表格，要在此基础上做表格内单元格的合并，需求要求的表格长这样，话不多说直接上代码

首先，打开avue的官方文档可以看到，它是提供了表格列合并的方法，并且提供了示例，但是与我实际需求的有所不一样。它是固定的第几列合并，而我实际的数据需要根据指定数组的长度进行合并，就是底下标记的itemList，要根据它实际长度进行合并

所以，首先要做的，就是更改原有的数组

this.tableData = res.data.records
            .map((v, i) => {
              return v.itemList.map((item, index) => {
                return {
                  ...item,
                  ...v,
                  xh: i + 1,
                  xhs: index,
                  size: v.itemList.length,
                };
              });
            })
            .flat();

首先说一下思路，就是双重循环，先循环外面的，再循环里面的，然后将外层的v和里层的item 都进行展开，方便取值，然后xh就是表格的序号，xhs下面的代码会用到，它是关键的判断，size就是应该合并多少单元格，而flat方法，就起到一个数组降维与扁平空项的作用，毕竟两个map()循环返回出来的是一个多维数组。合并代码长这样

spanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 0 ||
        columnIndex === 1 ||
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 7 ||
        columnIndex === 8 ||
        columnIndex === 9 ||
        columnIndex === 10
      ) {
        if (row.xhs === 0) {
          return {
            rowspan: row.size,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

其中的columnIndex就是当前列号，从0开始排列，然后第二个if判断就是我的itemList数组的第1项开始向下合并，只有第一项才向下合并它的length个单元格，反之则不合并。

最后，就能得到想要的效果

avue表格列合并文档：https://avuejs.com/crud/crud-column/#%E5%88%97%E5%90%88%E5%B9%B6