antd表格改变单元格样式

前言：做需求时，有时候需要单独给表单的单元格增加样式，这里提供两种修改单元格样式的思路。

一、antd表格封装好的属性配置：改变单元格样式的属性是作用在columns上的，所以先在columns列上定义方法，如下图：

columns: [

        {

          title: 'author_id',

          dataIndex: 'author_id',

          key: 'author_id',

          scopedSlots: { customRender: 'author_id' },

          customCell: this.onCustomCell,

        },

 ]

（1）根据自己的判断条件来改变想要改变的单元格样式

// 单元格属性

    onCustomCell(record, rowIndex) {

      console.log('record', record, 'rowIndex', rowIndex);

      if (record.tab === 'share') {

        return {

          style: {

            'background-color': 'rgb(255,150,150)',

          },

        };

      }

    }

（2）找到具体的某一行某一列的单元格，动态修改它的样式，如下图：

// 单元格属性

onCustomCell(record, rowIndex) {

        let fieldArr = []

        for(let i in record){

                if(i.indexOf('supconit')<0&&i!=='quality_filter_result'){

                    fieldArr.push(i)

                }

            }

        //根据自己需求逻辑，找到对应的rowIndex与columnIndex

        let queField = record.supconit_problem_column

        let queIndex = Number(fieldArr.indexOf(queField)) +2

        this.$nextTick(() => {

            let tableDetail = document.getElementById('detailsTable')

            let tbodyList = []

            this.getDOM(tbodyList, tableDetail, 'TBODY');

            let tbodyItem = tbodyList[0]

            let trItem =tbodyItem.children[rowIndex]

            let tdItem =trItem.children[queIndex]

            if(tdItem){

                tdItem.style.cssText = 'background-color:  #FED8DA'

            }

        })

    }