el-table自定义背景颜色 行 单元格等

<template>
<!--  :span-method="objectSpanMethod"  根据 id或者定义字段合并单元格-->
<!--  :row-class-name="tableRowClassName" 定义每条数据的背景颜色-->
  <!--  :cell-class-name="tableCellClassName" 定义每格数据的背景颜色-->
  <el-table
          :span-method="objectSpanMethod"
          :cell-class-name="tableCellClassName"
          :row-class-name="tableRowClassName"
          :data="tableData"
          style="width: 100%">
    <el-table-column
            label="Date"
            prop="date">
    </el-table-column>
    <el-table-column
            label="Name"
            prop="name">
    </el-table-column>
    <el-table-column
            align="right">
      <template slot="header" slot-scope="scope">
        <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          type:0

        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          type:0
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          type:1
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          type:2
        }],
        search: ''
      }
    },
    methods: {
      //定义每条数据的背景颜色
      tableRowClassName(row){

        if (row.row.type==1) {
          return 'red';
        }
        return '';
      },
      //定义每格数据的背景颜色
      tableCellClassName(row,index){
        if (row.columnIndex==1){
          return 'red1';//.red1 去设置样式
        }},
      // 根据 id或者定义字段合并单元格
      //that.getListDataForRowAndColumn(data[0].data); 需要把所有数据传入
      getListDataForRowAndColumn(data){
        let self = this;
        self.rowAndColumn = [];
        self.rowRoomColumn = [];
        for (var i = 0; i < data.length; i  ) {
          if (i === 0) {
// 如果是第一条记录（即索引是0的时候），向数组中加入１
            self.rowAndColumn.push(1);
            self.pos = 0;
            self.rowRoomColumn.push(1);
            self.posT = 0;
          } else {
//data[i].typeDesc就是你从接口读取的字段信息，下同
            if (data[i].type === data[i - 1].type) {
// 如果typeDesc相等就累加，并且push 0
              self.rowAndColumn[self.pos]  = 1
              self.rowAndColumn.push(0)
              if (data[i].key === data[i - 1].type) {
// 如果areaDesc相等就累加，并且push 0
                self.rowRoomColumn[self.posT]  = 1
                self.rowRoomColumn.push(0)
              } else {
                self.rowRoomColumn.push(1)
                self.posT = i
              }
            } else {
// 不相等push 1
              self.rowAndColumn.push(1)
              self.pos = i;
              self.rowRoomColumn.push(1)
              self.posT = i
            }
          }
        }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        let self = this
        if (columnIndex ===1||columnIndex ===0||columnIndex ===9) {
          if (self.rowAndColumn[rowIndex]) {
            let rowNum = self.rowAndColumn[rowIndex];
            return {
              rowspan: rowNum,
              colspan: rowNum > 0 ? 1 : 0
            }
          }
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      },

    },
  }
</script>

这篇好文章是转载于：学新通技术网