el-table找出当前单元格与对应的上下列的值

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

以下是示例代码，对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>

结果，第4行没有边框是因为它对应的上一个单元格和下一个单元格的值都是一样的。