SOURCE

console.clear();
var Main = {
   data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          age: "18",
          changedType: 0,
          address: "上海市普陀区金沙江路 1518 弄",
          children:[{
          date: "2016-05-04",
          name: "王小虎",
          age: "23",
          changedType: 1,
          address: "上海市普陀区金沙江路 1517 弄",
          changes: ["name", "address", "date"],
        },]
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          age: "23",
          changedType: 1,
          address: "上海市普陀区金沙江路 1517 弄",
          changes: ["name", "address", "date"],
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          age: "24",
          changedType: 2,
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          age: "25",
          changedType: 3,
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  created() {},

  methods: {
    cellClassName({ row, column }) {
      //   console.log(row.changes, column.property, rowIndex, columnIndex);
      if (row.changes && row.changes.includes(column.property)) {
        return "changed";
      } else {
        return;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row.age, rowIndex);
      if (row.changedType == 2) {
        return "warning-row";
      } else if (rowIndex == 3) {
        return "success-row";
      }
      return "";
    },
  },
}

var Ctor = Vue.extend(Main);
var app = new Ctor().$mount('#app');

<div id="app">
	<div>
		<h2>变化表</h2>
		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :cell-class-name="cellClassName" roe
		 row-key="id" :tree-props="{
                    children: 'children',
                    hasChildren: 'hasChildren',
                  }">
			<el-table-column prop="date" label="日期" width="180"> </el-table-column>
			<el-table-column prop="age" 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>
	</div>
</div>
<script src="//unpkg.com/vue/dist/vue.js">

</script>
<script src="//unpkg.com/element-ui@2.5.4/lib/index.js">

</script>

@import url("//unpkg.com/element-ui@2.5.4/lib/theme-chalk/index.css");
div p:nth-last-of-type(1) {
  color: red;
}

div p:last-of-type {
  font-size: 1.2rem;
}

.el-table .warning-row {
  color: #28db70;
}

.el-table .success-row {
  color: grey;
  background-color: #01010125;
  text-decoration: line-through;
}
.changed {
  color: red;
}