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

需求

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

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

• 拿到当前页的列表数据，生成重复的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 "";
      }

具体代码逻辑

    getList() {
      this.loading = true;
      listImport(this.queryParams).then((response) => {
        let data = response.rows;
        // 创建一个映射来存储每个policeId的数量
        const idCountMap = new Map();
        // 遍历数组，统计每个policeId的数量
        data.forEach((item) => {
          const count = idCountMap.get(item.policeId) || 0;
          idCountMap.set(item.policeId, count + 1);
        });
        // 创建一个数组来收集重复的policeId
        const arr = [];
        // 遍历映射，收集出现次数大于1的policeId
        idCountMap.forEach((count, id) => {
          if (count > 1) {
            arr.push(id);
          }
        });
        console.log(arr); // 输出: 重复的policeId集合

        data.forEach((item, index) => {
          if (arr.indexOf(item.policeId) != -1) {
            item.type = arr.indexOf(item.policeId) + 1;
          }
        });
        this.reportList = response.rows;
        // console.log(this.reportList, "this.reportList");
        this.total = response.total;
        this.loading = false;
      });
    },
	

 	<el-table
      border
      v-loading="loading"
      :data="reportList"
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"
    >

	tableRowClassName({ row, rowIndex }) {
      // console.log(row.type, row.type % 3);
      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 "";
      }
    },

::v-deep .el-table .yellow-row {
  background: #f9ecd9;
}
::v-deep .el-table .blue-row {
  background: #daecfe;
}
::v-deep .el-table .green-row {
  background: #e2f3d9;
}