ant design vue table 列合并

199 阅读1分钟

此处举例, 合并第一列 第一行第n行, 第n行第n+m行

  // html部分
    <a-table
      bordered
      :pagination="false"
      :columns="columns"
      :data-source="tableData"
      :scroll="{ x: 1500, y: 1500 }"
    ></a-table>
    
    
    //js部分
    
    columns: [
        {
          title: '一级指标',
          dataIndex: 'targetName',
          width: 150,
          customCell: (record, rowIndex) => {
          //  合并列
            return this.mergeCellsSlot(record, rowIndex);
          },
          fixed: 'left',
        },
        {
          title: '二级指标',
          dataIndex: 'secondTargetName',
          width: 250,
          customCell: (record, rowIndex) => {
            return this.mergeCellsSlotTwo(record, rowIndex);
          },
          fixed: 'left',
        },
        {
          title: '三级指标',
          dataIndex: 'targetWorkable',
          width: 500,
          fixed: 'left',
        },
      ],
      
      
       // 合并一级单元格
    mergeCellsSlot(record, rowIndex) {
      // 开始下标
      const index = this.tableData.findIndex((item) => item.targetName == record.targetName);
      // 需要合并的单元格数
      let rowSpanNum = 0;

      this.tableDatas.forEach((item) => {
        if (item.targetName == record.targetName) {
          rowSpanNum++;
        }
      });

      // 结束下标
      let indexIdLength = index + rowSpanNum;

      return {
          //  相同名称(判断条件自己定) 的, 相邻的
          //  设置  初第一个之外的 都隐藏
        style: {
          display: index < rowIndex && rowIndex < indexIdLength ? 'none' : undefined,
        },
        //设置 row-span
        attrs: {
          rowSpan: rowIndex === index ? rowSpanNum : 1,
        },
      };
    },