效果
页面代码
通过:cell-class-name
动态绑定类名
数据
tableData: [
{
date: "2023-05-02",
name: "兔子先森",
address: "上海市普陀区金沙江路 1518 弄",
isShow: 1,
},
{
date: "2023-05-04",
name: "兔子先森",
address: "上海市普陀区金沙江路 1517 弄",
isShow: 1,
},
{
date: "2023-05-01",
name: "兔子先森",
address: "上海市普陀区金沙江路 1519 弄",
isShow: 0,
},
{
date: "2023-05-03",
name: "兔子先森",
address: "上海市普陀区金沙江路 1516 弄",
isShow: 2,
},
],
js方法
直接写到methods
中,列表绑定即可,不需要放到生命周期中。
// 修改单元格样式的方法
myclass({ row, column, rowIndex, columnIndex }) {
// row当前行,column表格列,rowIndex表格的第几行,columnIndex第几个格子
// 根据当前行的参数判断,修改当前行样式
if (row.isShow == 0) {
return "setclass";
} else if (row.isShow == 2) {
return "setSuccess";
}
// 还可以设置对应单元格颜色
// 表格的第二行-起始下标0
if (rowIndex === 1) {
// 第二行下标为1的格子
if (columnIndex == 1) {
return "setHeight";
}
}
},
css部分
不能使用scope
作用域,否则背景色不生效
.setclass {
background: yellow !important;
color: red !important;
}
.setSuccess {
background: green !important;
color: white !important;
}
.setHeight {
color: blue !important;
}
动态刷新列表数据关联列表背景色
当列表数据更改时,我们需要根据列表数据来动态判断列表是否高亮提示,此时只需要更改列表数据即可
,列表重载数据会再次动态刷新,不需要调用任何方法
。
// 数据未上述列表数据
isDanger() {
this.tableData.forEach((el,index) => {
if(index % 2 == 0){
el.isShow = 0
}else {
el.isShow = 2
}
});
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 【重学C++】04 | 说透C++右值引用(上)
文章首发 【重学C++】04 | 说透C++右值引用(上) 引言 大家好,我是只讲技术干货的会玩code,今天是【重学C++】的第四讲,在前面《03 | 手撸C++智能指针实战教程》中,我们或多或少接触了右值引用和移动的一些用法。 右值引用是 C++11 标准…