vue table 点击单元格修改单元格背景色 使用 customCell 改变单元格背景色(样式)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
解决思路是定义一个可选颜色数组,一个当前颜色字段,一个已设置颜色数组(对象属性包含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.效果图,可以点击颜色按钮切换颜色,双击单元格改变成对应的背景色。
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)