<template>
// 遍歷表格
    <div class="dormitoryData">
      <el-table
        ref="dormitoryTable"
        :data="dormitory"
        tooltip-effect="dark"
        stripe
        style="width: 100%">
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column label="序號"  type="index" width="65"></el-table-column>
        <el-table-column label="人物" prop="people">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.people }}</div>
          </template>
        </el-table-column>
        <el-table-column label="關係" prop="relationship">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.relationship }}</div>
          </template>
        </el-table-column>
        <el-table-column label="初見" prop="meet">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.meet }}</div>
          </template>
        </el-table-column>
        <el-table-column label="地點" prop="place">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.place }}</div>
          </template>
        </el-table-column>
        <el-table-column label="暱稱" prop="execg">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.execg }}</div>
          </template>
        </el-table-column>
        <el-table-column label="認識年限" prop="year">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.year }}</div>
          </template>
        </el-table-column>
        <el-table-column label="成名之作" prop="works">
          <template slot-scope="scope">
            <div :class="scope.row.isEdit==0? 'one' :''"> {{ scope.row.works }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<script>
 
  export default {
   
    data () {
      return {
        dormitory: [{
          people: '雷森',
          relationship: '大學室友',
          meet: '2010-09-02',
          place: '圖書館',
          execg: '胖子',
          year: '8年',
          works: '海闊天空',
          isEdit: '1'
        }, {
          people: '劉利偉',
          relationship: '大學室友',
          meet: '2010-09-02',
          place: '5#633',
          execg: '老大',
          year: '8年',
          works: '勇氣',
          isEdit: '1'
        }, {
          people: '李金龍',
          relationship: '大學室友',
          meet: '2010-09-02',
          place: '5#633',
          execg: '二哥',
          year: '8年',
          works: '遇見',
          isEdit: '1'
        }, {
          people: '馬康',
          relationship: '大學室友',
          meet: '2010-09-02',
          place: '餐飲大廈',
          execg: '康哥',
          year: '8年',
          works: '不再聯絡',
          isEdit: '1'
        }, {
          people: '牛光衛',
          relationship: '大學室友',
          meet: '2010-09-02',
          place: '圖書館',
          execg: '牛牛娃',
          year: '8年',
          works: '斷點',
          isEdit: '1'
        }, {
          people: '陸兆攀',
          relationship: '大學室友',
          meet: '1991-07-27',
          place: '百浪',
          execg: '帥哥',
          year: '27年',
          works: '不再猶豫',
          isEdit: '0'
        }, {
          people: '小甜',
          relationship: '親密的人',
          meet: '2016-10-05',
          place: '小寨',
          execg: '甜甜圈',
          year: '2年',
          works: 'Forever Love',
          isEdit: '0'
        }]
      }
    }
  }
</script>

<style lang="scss">
.one {
      background: #ff1493;
    }
</style>
 

 效果如下圖所示，表格行的背景顏色會根據一行中的isEdit 這個值得屬性改變