表格行合并以及样式修改

表格行合并以及样式修改

合并行通过customRender实现，因为要求合并行后，展示多行数据，所以使用了$createElement，由于使用了this，所以将整体封装了一个方法。

借助customCell动态修改了换行数据的样式

实现效果

<a-table :showHeader="false" :columns="columns" :dataSource="tableData" :pagination="false"   :row-key="(record) => record.indexNum" bordered>
</a-table>


getColumns(){
        this.columns = [
        {
          dataIndex: 'time',
          key: 'time',
          align: 'center',
          title: '时间',
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {},
            };
            if (index === 0 || index === 4) {
              obj.attrs.rowSpan = 4;
            }else if (index === 8) {
              obj.attrs.rowSpan = 3;
            }else{
              obj.attrs.rowSpan = 0;
            }
            return obj;
          }
        },
        {
          dataIndex: 'indexNum',
          key: 'indexNum',
          align: 'center',
          title: '序号',
        },
        {
          title: '内容',
          dataIndex: 'content',
          align: 'center',
          key: 'content',
          customCell: (record, index) => {
            // 单元格背景色添加过滤条件
            if (record.content) {
              return { 
                style: {
                  'background': 'rgba(249, 250, 252, 100)',
                  'color': '#101010',
                  'font-size': '16px',
                  'font-family': 'PingFang SC'
                  // 'text-align': 'left'
                } 
              };
            }
          },
          customRender: (value, row, index) => {
            let child = this.$createElement('div', {
              domProps: {
                innerHTML: value + "<br><span style='color:#999999;font-size:14px'>张老师</span>"
              }
            })
            const obj = {
              children: value ? child : value,
              attrs: {},
            };
            if (index%2 ===0) {
              obj.attrs.rowSpan = 2;
            }else{
              obj.attrs.rowSpan = 0;
            }
            return obj;
          },
        }]
      },