vue table 点击单元格修改单元格背景色使用 customCell 改变单元格背景色（样式）

原创已于 2023-07-24 17:46:15 修改 · 5.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-01-12 10:07:47 首次发布

该文章介绍了一种方法，通过在React应用中定义颜色数组和当前颜色字段，以及处理双击事件来改变表格单元格的背景色。利用AntDesign的数据表格组件，结合customCell方法和setColorData数组，动态设置和存储单元格的颜色信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决思路是定义一个可选颜色数组，一个当前颜色字段，一个已设置颜色数组（对象属性包含name: 属性名，value：属性值，index：下标行，color：显示颜色，实际有属性名和下标就可以定义到哪行哪列的单元格了），点击事件（自己定，我用的双击）。

1.data内定义以下属性

        colorData: ['red', 'orange', 'yellow', 'green','#7777ff','#a028f8','violet', '#ff8b91', '#ffd47d', '#6bff6b', '#ffff9b', '#80fffd', '#b5b5b5', '#fafafa'],
        nowColor: 'red',
        // name: 属性名，value：属性值，index：下标行，color：显示颜色
        setColorData: [],

2.在columns里定义customCell（这里是一列）。

{
            title: '物料供应商',
            dataIndex: 'customerName',
            key: 'customerName',
            customCell: (record, index) => {
              return {
                style: {
                  'background-color': this.getColor(record, index, 'customerName')
                },
                on: {
                  dblclick: () => {
                    this.customCell(record, index, 'customerName')
                  }
                }
              }
            },
            scopedSlots: {
              filterDropdown: 'string',
              filterIcon: 'filterIcon'
            }
         },

3.methods内定义方法

      customCell(record, index, colName) {
        const find = this.setColorData.find(ele => {
          return ele.name === colName && ele.value === record[colName] && ele.index === index
        })
        if (find) {
          find.color = this.nowColor
        } else {
          const line = {
            name: colName,
            value: record[colName],
            index: index,
            color: this.nowColor
          }
          this.setColorData.push(line)
        }
      },
      getColor (record, index, colName) {
        const find = this.setColorData.find(ele => {
          return ele.name === colName && ele.value === record[colName] && ele.index === index
        })
        if (find) {
          return find.color
        }
        return ''
      },

4.选择颜色组件

    <a-row>
      <a-col :span="24">
        <a-radio-group v-model="nowColor">
          <a-radio-button
            v-for="item in colorData"
            :style="{'background': item, 'color': item === nowColor ? item : 'black'}"
            :key="item"
            :value="item">{{ item }}</a-radio-button>
        </a-radio-group>
      </a-col>
    </a-row>

4.效果图，可以点击颜色按钮切换颜色，双击单元格改变成对应的背景色。