0
点赞
收藏
分享

微信扫一扫

antd design vue 合并a-table 单元格

人间四月天i 2022-04-14 阅读 95
java
{
  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 条评论