1. Requisitos: compare los datos de dos tablas y agregue un fondo rojo para diferentes contenidos, como se muestra en la siguiente figura
2. El código es el siguiente.
<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>