首页 行业资讯 宠物日常 宠物养护 宠物健康 宠物故事
您的当前位置:首页正文

el-table-column动态改变单元格样式

2021-10-20 来源:画鸵萌宠网
el-table-column动态改变单元格样式

功能:根据数据⾥的值,判断当前字符串是否包含在数组⾥⾯,如果包含的话改变当前单元格颜⾊

1.初步尝试过插槽的⽅式,但是对于数组⾥⾯的字符串出现重现的情况,导致有的单元格被忽略掉了,⽽且这种⽅式只可以改变字体颜⾊不能改变背景⾊,数组例如:[Rate,signRate,]⾥⾯都包含了Rate

2.尝试使⽤el-table⾥⾯的:cell-class-name

row:⾥⾯是所有字段column:是当前tbrowIndex:⾏数columnIndex:列数

注意:return 的是style⾥⾯的class名称,不要直接返回样式

不能⽤indexOf.--之前看了⼀篇⽂章说不能这个⽅法⾥⾯不能⽤for,后来问了⼤佬说没问题,数组循环要使⽤i++的⽅式

methods: {

rowClass({row, column, rowIndex, columnIndex}) { if(row.columnList!== null) {

for (let i = 0; i < row.columnList.length; i++) { if (row.columnList[i] === column.property) { return 'bgColor'; } } } },}

不要加 scoped 限制,不然就不会⽣效

因篇幅问题不能全部显示,请点此查看更多更全内容