antd vue table 单元格添加样式背景色 customCell属性

拓展使用  customRow

https://blog.csdn.net/EasonGG/article/details/105687765

 

https://blog.csdn.net/u012215273/article/details/107907460

https://segmentfault.com/q/1010000021780046

通用方式：

            {
                    title: '17:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot173' },
                    customCell:this.renderTdBackground173
                },

            renderTdBackground173(record){
                return this.renderTdBackground('17:30',record)
            },

            //渲染有数据的单元格的颜色
            renderTdBackground (time,record) {
                let bookedList = record.bookedList
                if(null==bookedList||undefined==bookedList){
                    return
                }
                let currentDate
                ...return {
                    style: {
                        // 行背景色

                        'background-color': '#8fd0fa',

                        'cursor': 'pointer',

                    },
                    on: {
                        // 鼠标单击行
                        click: event => {
                            console.log(123);
                            this.meetingroomBook()
                        },
                    },
                };
            }
        }

 

 

 

 我发现  customCell 函数的第二个参数rowIndex恒为0，

另外 每一项的函数如果写在method里则无法判断当前列，于是项目中采用了如下写法

 

https://blog.csdn.net/qq_33262275/article/details/109238602?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&dist_request_id=6b355da2-8d9a-4124-bdd2-3b9d5e81816b&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

 

<a-table
  :columns="renderColumns(columns)"
  :data-source="tableData"
>
</a-table>

methods: {
  renderColumns(columns) {
    const _this = this
    return columns.map(item => {
      return {
        ...item,
        customCell(record, index) {
          return {
            click: (event) => {},
            dblclick: (event) => {},
            contextmenu: (event) => {},
            mouseenter: (event) => {},
            mouseleave: (event) => {},

               style: {

                // 单元格背景色

                  'background-color': '#f9999a'

                }

          }
        }
      }
    })
  }
}