el-table根据数据某个属性不同，做斑马纹，设置表格行样式

一、需求

1、相邻的日期如果一样，用同种颜色标记
2、不同日期要有对比间隔
3、日期为空不做样式

二、效果

三、思路

1、要怎么判断上下时间是一样的？
2、判断以后要怎么标记？
3、标记以后怎么控制样式？

四、实现

1、首先要整理数据，判断出上下数据是否是一样的，因为是后一个与前一个比较，所以需要单独判断第一条数据。判断第一次的时间重复几次；接下来的数据就可以按照正常的来；最后一项也需要单独判断，判断是否和上一条数据一样。

代码：

// rowI 是自己定义的相同数据会重复几次的一个标记参数
this.tableData.forEach((e, i) => {
 // i === 0时单独判断
 if (i === 0) {
   // 判断第一条数据的时间最后出现的位置
   e.rowI = this.tableData.map(k => k.date).lastIndexOf(e.date)
 } else if (i - 1 >= 0 && e.date !== this.tableData[i - 1].date) {
   // 当前的和上一个的属性相同，标记rowI
   e.rowI = i
 } else if (i === this.tableData.length - 1) {
   // 最后一个也是单独判断，如果最后一条数据和上一条数据的时间不一致，rowI标记为当前的i
   if (e.date !== this.tableData[i - 1].date) {
     e.rowI = i
   }
 }
})

2、这个时候我们得到this.tableData中是有的数据有了rowI标记，我们接下来的要做的就是怎么可以把索引0-2的设置为一种颜色，索引3-4设置另一种颜色，然后5-6要重复原来的颜色。

我们可以定义两个空数组，里面分开存放两个不同颜色的标记

// 定义两个空数组，对有rowI标记的做分割
      let a = []
      let b = []
      // 过滤undefined无效数值
      let inList = this.tableData.filter(item => item.rowI || item.rowI === 0)
      // 区分奇偶、可以把颜色间隔开
      inList.forEach((e, i) => {
        if (i % 2) {
          a.push(e)
        } else {
          b.push(e)
        }
      })
      // 两个在区分颜色时备用
      this.aList = a
      this.bList = b

3、接下来就是区分样式，el-table自带控制行样式属性:row-class-name="tableRowClassName"
时间为空的不做样式，还需要判断当前行的rowI有没有，没有的话需要填充上。上一步分开的两个存放区分不同颜色的数组就用上了，如果当前行的rowI能够和其中一个list中的rowI匹配上的话，设置当前行为一种颜色，另一个道理相同。

// 无数据==>无样式
      if (!row.date) {
        return ''
      }
      // 第一行，如果和下面行相同的话，返回的是一样的，不一样的话会间隔开，不限数量
      if (rowIndex === 0) {
        if (this.list[0].date === this.list[rowIndex + 1].date) {
          return 'success-row'
        } else {
          return 'warning-row'
        }
      }
      // 其他按照每部分不同隔开
      if (rowIndex <= this.list.length - 1 && rowIndex > 0) {
        row.rowI = !row.rowI ? this.list[rowIndex - 1].rowI : row.rowI
        if (this.aList.map(a => a.rowI).indexOf(row.rowI) !== -1) return 'warning-row'
        if (this.bList.map(b => b.rowI).indexOf(row.rowI) !== -1) return 'success-row'
      }

五、完整代码

<template>
  <el-card shadow="never" class="aui-card--fill">
      <el-table :data="list" :row-class-name="tableRowClassName">
        <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>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-05', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
      ],
      list: [],
      aList: [],
      bList: []
    }
  },
  mounted () {
  	let that = this
    setTimeout(() => {
      this.colspanMethod()
    }, 300)
  },
  methods: {
    colspanMethod () {
      // 判断当前和下一个数据若是时间相同
      this.tableData.forEach((e, i) => {
        // i === 0时单独判断
        if (i === 0) {
          e.rowI = this.tableData.map(k => k.date).lastIndexOf(e.date)
        } else if (i - 1 >= 0 && e.date !== this.tableData[i - 1].date) {
          // 当前的和上一个的属性形同，标记rowI
          e.rowI = i
        } else if (i === this.tableData.length - 1) {
          // 最后一个也是单独判断
          if (e.date !== this.tableData[i - 1].date) {
            e.rowI = i
          }
        }
      })
      // 定义两个空数组，对有rowI标记的做分割
      let a = []
      let b = []
      // 过滤undefined无效数值
      let inList = this.tableData.filter(item => item.rowI || item.rowI === 0)
      // 区分奇偶、可以把颜色间隔开
      inList.forEach((e, i) => {
        if (i % 2) {
          a.push(e)
        } else {
          b.push(e)
        }
      })
      // 找一个容器把当前循环好的数据放进去，表格绑定list，如果绑定tableData的话，一进页面数据还没有加载完全，会出错
      this.list = this.tableData
      // 两个在区分颜色时备用
      this.aList = a
      this.bList = b
    },
    // 控制样式
    tableRowClassName ({ row, rowIndex }) {
      // 无数据==>无样式
      if (!row.date) {
        return ''
      }
      // 第一行，如果和下面行相同的话，返回的是一样的，不一样的话会间隔开，不限数量
      if (rowIndex === 0) {
        if (this.list[0].date === this.list[rowIndex + 1].date) {
          return 'success-row'
        } else {
          return 'warning-row'
        }
      }
      // 其他按照每部分不同隔开
      if (rowIndex <= this.list.length - 1 && rowIndex > 0) {
        row.rowI = !row.rowI ? this.list[rowIndex - 1].rowI : row.rowI
        if (this.aList.map(a => a.rowI).indexOf(row.rowI) !== -1) return 'warning-row'
        if (this.bList.map(b => b.rowI).indexOf(row.rowI) !== -1) return 'success-row'
      }
    }
  }
}
</script>
<style>
  .el-table .warning-row {
    background: rgb(181,164,233);
  }

  .el-table .success-row {
    background: rgb(127,220,237);
  }
</style>