antd表格合并，设置字体和单独背景色，添加事件

1.html部分

<a-table

        ref="table"

        size="middle"

        bordered

        rowKey="id"

        :scroll="{ x: true }"

        :columns="columns"

        :dataSource="dataSource"

        :pagination="ipagination"

        :loading="loading"

        @change="handleTableChange"

      >

        <template slot="title">

          <div class="title">表格顶部标题</div>

        </template>

      </a-table>

 2.js部分

columns: [

        {

          title: '序号',

          width: '50px',

          align: 'center',

          customRender: (value, record, index) => {

            if (index + 1 !== this.dataSource.length) {

              return `${index + 1}`

            }

            return {

              children: '合计',

              attrs: {

                colSpan: 3   //合并几列，我这里是合并前3列

              },

              style: {

                fontWeight: 'bold'  

              }

            }

          }

        },

        {

          title: '大区',

          align: 'center',

          dataIndex: 'areaName',

          customRender: this.renderContentA

        },

        {

          title: '零售公司',

          align: 'center',

          dataIndex: 'companyName',

          customRender:customRender: (value, row, index) => {

            const obj = {

              children: <a onClick={() => this.handleDetail(row)}>{value}</a>,

              attrs: {}

            }

            if (index + 1 === this.dataSource.length) {

              obj.attrs.colSpan = 0

            }

            return obj

          }

        },

        {

          title: '应观',

          align: 'center',

          dataIndex: 'shouldNum',

          customRender: this.renderContentB

        },

        {

          title: '实观',

          align: 'center',

          dataIndex: 'actualNum',

          customRender: this.renderContentB

        },

        {

          title: '合格',

          align: 'center',

          dataIndex: 'qualifiedNum',

          customRender: this.renderContentB

        },

        {

          title: '覆盖率',

          align: 'center',

          dataIndex: 'coverageRate',

          customRender: this.renderContentC

        },

        {

          title: '合格率',

          align: 'center',

          dataIndex: 'qualifiedRate',

          customRender: this.renderContentC

        },

        {

          title: '平均分',

          align: 'center',

          dataIndex: 'averageScore',

          customRender: this.renderContentC

        }

      ]

 这里我尝试直接attrs添加一个class类名，类名加上了但是给类名写样式不生效，后面尝试用style可以生效

renderContentA(value, row, index) {

      const obj = {

        children: value,

        attrs: {}

      }

      if (index + 1 === this.dataSource.length) {

        obj.attrs.colSpan = 0

      }

      return obj

    },

    renderContentB(value, row, index) {

      const obj = {

        children: value,

        attrs: {}

      }

      if (index + 1 === this.dataSource.length) {

        obj.attrs.colSpan = 1  //合并几列 0 不显示

         obj.attrs.style = 'font-weight: bold' //添加自定义样式

      }

      return obj

    },

    renderContentC(value, row, index) {

      const obj = {

        children:value ,

        attrs: {}

      }

      if (index + 1 === this.dataSource.length) {

        obj.attrs.colSpan = 1 //合并几列 0 不显示

        obj.attrs.style = 'background:#92d050;font-weight: bold' //添加自定义样式

      }

      return obj

    }

3.css部分  给表头添加背景色

/deep/ .ant-table-thead > tr > th {

    color: #111 !important;

    background: #f79646 !important;

    font-weight: bold;

  }