antd动态合并行

//需要行合并col的就这样写,核心思想：表格支持行合并，使用 render 里的单元格属性 rowSpan 设值为 0 时，设置的表格不会渲染。
columns: Array<IJSONData> = [
    {
      title: '节点名称',
      dataIndex: 'nodeName',
      key: 'nodeName',
      width: 100,
      customRender: ({ record, text }) => {
        const obj: any = {
          children: text,
          props: {},
        };
        obj.props.rowSpan = record?.nodeTypeRowspan;
        return obj;
      },
    },
    {
      title: '次数',
      dataIndex: 'times',
      key: 'times',
      width: 100,
      customRender: ({ record, text }) => {
        const obj: any = {
          children: text,
          props: {},
        };
        obj.props.rowSpan = record?.timesRowspan;
        return obj;
      },
    },
]

//计算哪些数据的rowspan应该设置为0
checkRowSpan() {
    //这里几个对应上你自己需要合并行的字段就好了
    const nodeTypeRowspan: any = {};//记录nodeName次数
    const timesRowspan: any = {};//记录times次数
    const nodeTypeIdx: any = {};//记录nodeName索引
    const timesIdx: any = {};//记录times索引
    const tableData: any = [...this.listData];
    tableData.forEach((td, idx) => {
      if (!nodeTypeRowspan[td.nodeType]) {
        nodeTypeRowspan[td.nodeType] = 1;
        nodeTypeIdx[td.nodeType] = idx;
      } else {
        nodeTypeRowspan[td.nodeType] = nodeTypeRowspan[td.nodeType] + 1;
      }

      if (!timesRowspan[td.nodeType]) {
        timesRowspan[td.nodeType] = 1;
        timesIdx[td.nodeType] = idx;
      } else {
        if (
          td.nodeType === tableData[timesIdx[td.nodeType]].nodeType &&
          td.times === tableData[timesIdx[td.nodeType]].times
        ) {
          timesRowspan[td.nodeType] = timesRowspan[td.nodeType] + 1;
        }
      }
    });
    Object.keys(nodeTypeIdx).map((k) => {
      const idx = nodeTypeIdx[k];
      if (nodeTypeRowspan[k] > 1) {
        tableData[idx].nodeTypeRowspan = nodeTypeRowspan[k];
      }
      if (nodeTypeRowspan[k] < 2) return;
      const start = idx + 1;
      const end = idx + nodeTypeRowspan[k];
    //从start合并到end，下同
      for (let i = start; i < end; i++) {
        tableData[i].nodeTypeRowspan = 0;//代表不渲染
      }
    });
    Object.keys(timesIdx).map((k) => {
      const idx = timesIdx[k];
      if (nodeTypeRowspan[k] > 1) {
        tableData[idx].timesRowspan = timesRowspan[k];
      }
      if (timesRowspan[k] < 2) return;
      const start = idx + 1;
      const end = idx + timesRowspan[k];
      for (let i = start; i < end; i++) {
        tableData[i].timesRowspan = 0;//代表不渲染
      }
    });
    this.listData = tableData;
  }

//表格
                  <antTable
                    v-slots={{
                      bodyCell: (column) => {
                        // bodyCell 固定写法
                        if (column.column.render) {
                          const cellRender = column.column.render.bind(this);
                          return cellRender(column.value, column.record, column.index);
                        }
                      },
                    }}
                    bordered={true}
                    pagination={false}
                    tableLayout="fixed"
                    rowKey={(record) => {
                      return (record as any).id;
                    }}
                    size="small"
                    dataSource={this.listData}
                    columns={this.columns}
                  />