antd design vue 合并a-table 单元格

阅读 96

2022-04-14

{
  title: '通道',
  align: 'center',
  dataIndex: 'keepfield',
  customRender: (text, record, index) => {
    const obj = {
      children: text !== null ? text : "",
      attrs: {},
    };
    obj.attrs.rowSpan = this.mergeCells(
      text,
      this.dataSource,
      "keepfield",
      index
    );
    return obj;
  }

},

methods中的方法: data:表格的数据源    key:合并列的dataIndex

//单元格合并
mergeCells(text, data, key, index) {
  // 上一行该列数据是否一样
  if (index !== 0 && text === data[index - 1][key]) {
    return 0;
  }
  let rowSpan = 1;
  // 判断下一行是否相等
  for (let i = index + 1; i < data.length; i++) {
    if (text !== data[i][key]) {
      break;
    }
    rowSpan++;
  }
  return rowSpan;
},

精彩评论(0)

0 0 举报