vue2 Ant-design-vue ＜a-table 实现行多个单元合并，并内容居中显示

要求：

最后二行，前4格合并显示：total,与差值

效果：

 

实现：

设置某一列的属性时候，增加：customCell在这里style:{}设置内容对齐方式：

重点***：

customCell: (row, index) => {
      return {
        style: {
              'font-weight': 'bold',
              'background': 'rgba(0, 255, 120, 1)',
              'cursor': 'pointer',
              'width': '100px',
              'textAlign':'center'      //对齐方式
    }，

columns: [{
          title: '部门',
          dataIndex: 'depId',
          key: 'depId',
    customCell: (row, index) => {
      return {
        style: {
              'font-weight': 'bold',
              'background': 'rgba(0, 255, 120, 1)',
              'cursor': 'pointer',
              'width': '100px',
              'textAlign':'center'
    }，
    customRender: (value, row, rowIndex) => { //配置合并设置
        const obj = {
              children: value, //01Np
              attrs: {},
            };
            if (rowIndex === 0) {   // 第一行数据开始，跨行合并的长度为数据data的长度
              // obj.children='01Np'
              obj.attrs.rowSpan = this.dataSource.length - 2; // len表示该数据占几行：u01占4行，合并4行
            } else if (1 <= rowIndex && rowIndex < this.dataSource.length - 2) {    // 从第一行往后的所有行表格均合并，0表格第二行以后的单元格不画
              obj.attrs.rowSpan = 0;
            }
            if (rowIndex >= this.dataSource.length - 2) {
            //最后2格不合并，
              obj.attrs.colSpan = 4
            }
            return obj;
        }
}】