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

DX_release

已于 2023-07-24 17:46:15 修改

阅读量5.1k

点赞数 2

文章标签： vue.js 前端 javascript

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

本文链接：https://blog.csdn.net/qq_56995244/article/details/128654377

版权

解决思路是定义一个可选颜色数组，一个当前颜色字段，一个已设置颜色数组（对象属性包含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.效果图，可以点击颜色按钮切换颜色，双击单元格改变成对应的背景色。