antdesign customCell使用 单元格渲染

使用中有这么一个需求,就是根据单元格的数据去渲染单元格的颜色

主要代码如下:

export default {
        components: { MeetingroomBookModal },
        data () {
            const columns = [
                {
                    title: '会议室',
                    dataIndex: 'name',
                    width: '10%',
                },
                {
                    title: '8:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot8' },
                    customCell:this.renderTdBackground8
                },
                {
                    title: '8:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot83' },
                    customCell:this.renderTdBackground83
                },
                {
                    title: '9:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot9' },
                    customCell:this.renderTdBackground9
                },
                {
                    title: '9:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot93' },
                    customCell:this.renderTdBackground93
                },
                {
                    title: '10:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot10' },
                    customCell:this.renderTdBackground10
                },
                {
                    title: '10:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot103' },
                    customCell:this.renderTdBackground103
                },
                {
                    title: '11:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot11' },
                    customCell:this.renderTdBackground11
                },
                {
                    title: '11:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot113' },
                    customCell:this.renderTdBackground113
                },
                {
                    title: '12:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot12' },
                    customCell:this.renderTdBackground12
                },
                {
                    title: '12:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot123' },
                    customCell:this.renderTdBackground123
                },
                {
                    title: '13:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot13' },
                    customCell:this.renderTdBackground13
                },
                {
                    title: '13:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot133' },
                    customCell:this.renderTdBackground133
                },
                {
                    title: '14:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot14' },
                    customCell:this.renderTdBackground14
                },
                {
                    title: '14:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot143' },
                    customCell:this.renderTdBackground143
                },
                {
                    title: '15:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot15' },
                    customCell:this.renderTdBackground15
                },
                {
                    title: '15:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot153' },
                    customCell:this.renderTdBackground153
                },
                {
                    title: '16:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot16' },
                    customCell:this.renderTdBackground16
                },
                {
                    title: '16:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot163' },
                    customCell:this.renderTdBackground163
                },
                {
                    title: '17:00',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot17' },
                    customCell:this.renderTdBackground17
                },
                {
                    title: '17:30',
                    width: '4%',
                    scopedSlots: { customRender: 'tdSlot173' },
                    customCell:this.renderTdBackground173
                },

            ]
            return {
                nowTime:moment(),
                data,
                columns,
                pdata:data,
                queryParam: {
                    receiptDate: null,
                },

            }
        },
        methods: {
            moment,
            meetingroomBook () {
                this.$refs.meetingroomBookModal.visible = true
            },
            renderTd (time, record) {
                let currentDate
                if(null==this.queryParam.receiptDate||undefined==this.queryParam.receiptDate){
                    currentDate=this.nowTime
                }else{
                    currentDate = this.queryParam.receiptDate
                }
                let tdTimeStr=currentDate.format('YYYY-MM-DD')+" "+ time
                let tdTime=this.moment(tdTimeStr,'YYYY-MM-DD h:mm')
                let bookedList = record.bookedList
                for(let i=0;i<bookedList.length;i++){
                    let startTime=bookedList[i].startTime
                    let endTime=bookedList[i].endTime
                    let flag=false;
                    //假如日期+8点=>starttime&&日期+8点<=endtime
                    if(tdTime.isBefore(endTime)&&tdTime.isSameOrAfter(startTime)){
                        // return bookedList[i].name
                        if(this.moment(tdTime).isSame(startTime)){
                            return bookedList[i].name
                        }else{
                            return ""
                        }
                    }
                }
            },

            renderTdBackground8(record){
                return this.renderTdBackground('8:00',record)
            },
            renderTdBackground83(record){
                return this.renderTdBackground('8:30',record)
            },
            renderTdBackground9(record){
                return this.renderTdBackground('9:00',record)
            },
            renderTdBackground93(record){
                return this.renderTdBackground('9:30',record)
            },
            renderTdBackground10(record){
                return this.renderTdBackground('10:00',record)
            },
            renderTdBackground103(record){
                return this.renderTdBackground('10:30',record)
            },
            renderTdBackground11(record){
                return this.renderTdBackground('11:00',record)
            },
            renderTdBackground113(record){
                return this.renderTdBackground('11:30',record)
            },
            renderTdBackground12(record){
                return this.renderTdBackground('12:00',record)
            },
            renderTdBackground123(record){
                return this.renderTdBackground('12:30',record)
            },
            renderTdBackground13(record){
                return this.renderTdBackground('13:00',record)
            },
            renderTdBackground133(record){
                return this.renderTdBackground('13:30',record)
            },
            renderTdBackground14(record){
                return this.renderTdBackground('14:00',record)
            },
            renderTdBackground143(record){
                return this.renderTdBackground('14:30',record)
            },
            renderTdBackground15(record){
                return this.renderTdBackground('15:00',record)
            },
            renderTdBackground153(record){
                return this.renderTdBackground('15:30',record)
            },
            renderTdBackground16(record){
                return this.renderTdBackground('16:00',record)
            },
            renderTdBackground163(record){
                return this.renderTdBackground('16:30',record)
            },
            renderTdBackground17(record){
                return this.renderTdBackground('17:00',record)
            },
            renderTdBackground173(record){
                return this.renderTdBackground('17:30',record)
            },


            //渲染有数据的单元格的颜色
            renderTdBackground (time,record) {
                let bookedList = record.bookedList
                if(null==bookedList||undefined==bookedList){
                    return
                }
                let currentDate
                if(null==this.queryParam.receiptDate||undefined==this.queryParam.receiptDate){
                    currentDate=this.nowTime
                }else{
                    currentDate = this.queryParam.receiptDate
                }
                let tdTimeStr=currentDate.format('YYYY-MM-DD')+" "+ time
                let tdTime=this.moment(tdTimeStr,'YYYY-MM-DD h:mm')
                for(let i=0;i<bookedList.length;i++){
                    let startTime=bookedList[i].startTime
                    let endTime=bookedList[i].endTime
                    //假如日期+8点=>starttime&&日期+8点<=endtime
                    if(tdTime.isBefore(endTime)&&tdTime.isSameOrAfter(startTime)){
                        return {
                            // 这个style就是我自定义的属性，也就是官方文档中的props
                            style: {
                                // 行背景色
                                'background-color': '#8fd0fa',

                            },
                        }
                    }
                }
                return {
                    style: {
                        // 行背景色
                        'cursor': 'pointer',

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