解决思路是定义一个可选颜色数组,一个当前颜色字段,一个已设置颜色数组(对象属性包含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-buttonv-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.效果图,可以点击颜色按钮切换颜色,双击单元格改变成对应的背景色。
如果觉得《vue table 点击单元格修改单元格背景色 使用 customCell 改变单元格背景色(样式)》对你有帮助,请点赞、收藏,并留下你的观点哦!