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>