• 效果图如下：（点击表格会有一个对话框弹出来，里面是按钮进行选择进度，选择之后刷新列表，每个状态会有不同的颜色）

image.png

image.png

• 代码如下：

    <el-dialog
        :visible.sync="dialogVisible"
        style="padding:0;"
        width="30%">
        <button class="dialogButton" @click="changeStatus(20010)">未开发</button>
        <button class="dialogButton" @click="changeStatus(20011)">进行中</button>
        <button class="dialogButton" @click="changeStatus(20012)">测试中</button>
        <button class="dialogButton" @click="changeStatus(20013)">待发布</button>
        <button class="dialogButton" @click="changeStatus(20014)">已完成</button>
    </el-dialog>

 <el-table
    :data="tableData"
    tooltip-effect="dark"
    border
    @cell-click="cellClick"
    :cell-class-name="changeTrStyle"
    highlight-current-row
    style="width: 100%">
    <el-table-column
      type="index"
      align="center"
      width="50">
    </el-table-column>
    <el-table-column
      prop="title"
      label="需求"
      align="center"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      v-for="(item,index) in clientList"
      :key="index"
      :label="item"
      align="center"
      show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="scope.row.progressRate[index].status == 20010" >未开发</div>
          <div v-if="scope.row.progressRate[index].status == 20011">开发中</div>
          <div v-if="scope.row.progressRate[index].status == 20012">测试中</div>
          <div v-if="scope.row.progressRate[index].status == 20013">待发布</div>
          <div v-if="scope.row.progressRate[index].status == 20014">已上线</div>
          <div>{{scope.row.progressRate[index].updateTime}}</div>
        </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="120">
  　　　　<template slot-scope="scope">
            <el-row>
              <el-col :span="12">
                  <el-button type="primary" size="small" icon="el-icon-edit" @click="editItem(scope)"></el-button>
              </el-col>
              <el-col :span="12">
                  <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteItemConfirm(scope)"></el-button>
              </el-col>
            </el-row>
  　　　　</template>
  　　</el-table-column>
  </el-table>

  // 单击表格
      cellClick(row, column, cell, event){
        if(column.label!="需求" && column.label!="操作" && column.label){
          this.dialogVisible = true;
          this.iid = row.iid;
          this.client = column.label;
        }
      },

    // 修改表格背景色
      changeTrStyle({row, column, rowIndex, columnIndex}) {
        let progressRate = row.progressRate;
        let currentIndex = columnIndex - 2;
        
        if(column.label!="需求" && column.label!="操作" && column.label){
          switch (progressRate[currentIndex].status){
            case 20011:
              return 'developing'; break;
            case 20012:
              return 'testing'; break;  
            case 20013:
              return 'publishing'; break;
            case 20014:
              return 'published'; break;
          }
        }
      },

• 样式文件：

   .el-table tr td.developing{
      background: #FFE4B5;
      opacity:0.9;
    }
    .el-table tr td.testing{
      background: #FFA500;
      opacity:0.9;
    }
    .el-table tr td.publishing{
      background: #87CEFA;
      opacity:0.9;
    }
    .el-table tr td.published{
      background: #9ACD32;
      opacity:0.9;
    }