table表格对于相同的警情显示相同的背景色（三种颜色轮训）

小曲曲

于 2024-09-03 10:10:28 发布

阅读量411

点赞数 8

分类专栏： element 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43848576/article/details/141851957

版权

在这里插入图片描述

需求

一页之内相邻警情一样的显示一个底色
三种颜色轮训显示

实现思路（倒序思维，从后往前看）

拿到当前页的列表数据，生成重复的policeId集合，例如上图 [3,5,8,10]
当前页的列表数据循环，将上述重复的（即policeId在上述数组内的）添加一个新字段type属性；属性值为policeId在上述数组出现的索引值+1 ===> type分别为1、2、3、4
然后自定义行的样式:row-class-name="tableRowClassName"：没有type值的不设置，type值是3的倍数显示yellow …
最后css定义三个类名的颜色即可

	 if (row.type % 3 == 0) {
   
        return "yellow-row";
      } else if (row.type % 3 == 1) {
   
        return "blue-row";
      } else if (row.type % 3 == 2) {
   
        return "green-row";
      } else {
   
        return "";
      }