对比两个el-table，不同数据背景设置为红色

最新推荐文章于 2025-09-25 01:10:36 发布

原创最新推荐文章于 2025-09-25 01:10:36 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

该代码示例展示了如何在Vue.js应用中对比两个表格的数据，并对不一致的内容添加红色背景。通过`cell-style`属性和`compareData`方法，可以动态地改变单元格样式，以突出显示差异。

1、需求：对比两个表格数据，不同的内容添加红色背景，如下图所示
在这里插入图片描述

2、代码如下

<template>
  <div>
    <el-table :data="tableData1" :cell-style="compareData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-table :data="tableData2" :cell-style="compareData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
      ],
      tableData2: [
        { name: '张三', age: 18 },
        { name: '王五', age: 20 },
      ],
    };
  },
  methods: {
    compareData({ row, rowIndex, column, columnIndex }) {
    //比较两个表格中相同位置的单元格数据。如果数据不同，将背景颜色设置为红色
    //仅适用于具有相同结构和行数的表格
      const cellData1 = this.tableData1[rowIndex][column.property];
      const cellData2 = this.tableData2[rowIndex][column.property];
      if (cellData1 !== cellData2) {
        return { backgroundColor: 'red' };
      }
    },
  },
};
</script>