当前单元格与对应的上下列的值如果不相同就设置个红色边框

以下是示例代码，对tableData数据的name字段进行处理
如果当前name值与上一条数据的name值或者下一条数据的name值不相等，就设置红色边框。

<template><el-table :data="tableData" style="width: 100%" :header-cell-style="{'text-align': 'center'}" :cell-style="cellStyle"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-02',name: '王小虎2',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-02',name: '王小虎3',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-02',name: '王小虎3',address: '上海市普陀区金沙江路 1516 弄'},{date: '2016-05-02',name: '王小虎3',address: '上海市普陀区金沙江路 1516 弄'},{date: '2016-05-02',name: '王小虎4',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {cellStyle({ row, column, rowIndex, columnIndex }) {// 设置默认居中显示let cellStyleStr = 'text-align: center;';// 如果只有1条数据直接返回if (this.tableData && this.tableData.length === 1) return cellStyleStr;if (column.label === '姓名') {// 如果是第1行数据(这里rowIndex === 0是第1行数据),并且 当前行的name(row.name是当前行的数据) 不等于 下一行的name(这里用tableData[rowIndex + 1]表示下一行的数据, 用tableData[rowIndex - 1]表示上一行的数据)if (rowIndex === 0 && row.name !== this.tableData[rowIndex + 1].name) {cellStyleStr += 'border: 1px solid red'// rowIndex > 0是第二行到倒数第二行的数据}else if (rowIndex > 0 && rowIndex < this.tableData.length - 1 && (row.name !== this.tableData[rowIndex + 1].name || row.name !== this.tableData[rowIndex - 1].name)) {cellStyleStr += 'border: 1px solid red';// rowIndex === this.tableData.length - 1是最后一行的数据}else if (rowIndex === this.tableData.length - 1 && row.name !== this.tableData[rowIndex - 1].name) {cellStyleStr += 'border: 1px solid red';}}return cellStyleStr;}}
}
</script>