vue table 点击单元格修改单元格背景色 使用 customCell 改变单元格背景色(样式)
vue table 使用 customCell 改变单元格背景色(样式)
·
解决思路是定义一个可选颜色数组,一个当前颜色字段,一个已设置颜色数组(对象属性包含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.效果图,可以点击颜色按钮切换颜色,双击单元格改变成对应的背景色。
更多推荐
已为社区贡献1条内容
所有评论(0)