cell-class-name在vue组件使用不生效问题

转载自：http://t.csdn.cn/XhrIj

使用element-ui的el-table组件时设置cell-class-name为行设置背景色但没有生效，百度搜索找到解决方法

<el-table
  ref="table"
  v-loading="loading"
  v-el-height-adaptive-table="{bottomOffset: 80}"
  height="100px"
  :data="list"
  :header-cell-style="{background:'#398f82',color:'#FFFFFF',textAlign:'center'}"
  border
  class="table-fixed"
  :cell-class-name="rowClassName"
  @selection-change="handleSelectionChange"
  @sort-change="handleSortChange"
>
  <el-table-column type="selection" width="40" fixed/>
  <el-table-column label="序号" type="index" width="40" fixed/>
  <el-table-column
    prop="projectCode"
    label="项目编码"
    :show-overflow-tooltip="true"
    width="140"
    fixed
  >
    <template slot-scope="scope">
      <el-link @click="viewDetail(scope.row)">{{ scope.row.projectCode }}</el-link>
    </template>
  </el-table-column>
  <el-table-column
    label="项目名称"
    prop="projectName"
    min-width="300"
    :show-overflow-tooltip="true"
    sortable
  >
  </el-table-column>
  <!--<el-table-column-->
  <!--  prop="planYear"-->
  <!--  label="计划年度"-->
  <!--  :show-overflow-tooltip="true"-->
  <!--  width="120"-->
  <!--  fixed-->
  <!--/>-->
  <el-table-column
    prop="planBatch"
    label="计划批次"
    :show-overflow-tooltip="true"
    width="120"
  />
  <el-table-column
    prop="projectCategory"
    label="项目分类"
    :show-overflow-tooltip="true"
    width="100"
  />
  <el-table-column
    prop="projectNature"
    label="项目性质"
    width="80"
  />
  <el-table-column
    prop="constructionForm"
    label="建设形式"
    :show-overflow-tooltip="true"
    width="80"
  />
  <el-table-column
    prop="implScope"
    label="实施范围"
    :show-overflow-tooltip="true"
    width="100"
  />
  <el-table-column
    prop="projectGoal"
    label="项目目标"
    width="100"
    :show-overflow-tooltip="true"
  />
  <el-table-column
    prop="projectContent"
    label="项目内容"
    :show-overflow-tooltip="true"
    width="150"
  />
  <el-table-column
    prop="projectInvestTotal"
    label="项目总投资(万元)"
    width="100"
  />
  <el-table-column
    prop="releasePlanTotal"
    label="累计已下达计划(万元)"
    width="100"
  />
  <el-table-column label="计划资金" align="center">
    <el-table-column label="合计" prop="totalFund" width="100" align="center"/>
    <el-table-column label="资本金" prop="capitalFund" width="100" align="center"/>
    <el-table-column label="成本金" prop="costFund" width="100" align="center"/>
  </el-table-column>
  <el-table-column
    prop="orgName"
    label="项目责任单位"
    width="80"
    :show-overflow-tooltip="true"
  />
  <el-table-column
    label="责任部门"
    width="180"
  >
    <template slot-scope="scope">
      <el-select ref="companySelect" v-model="scope.row.deptId" filterable clearable placeholder="责任部门" style="width: 140px;" @change="changeOrgName($event,scope.row)" :title="scope.row.deptName" :disabled="scope.row.status!==1">
        <el-option
          v-for="item in companyList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
      </template>
  </el-table-column>
  <el-table-column
    label="项目负责人"
    width="140"
  >
    <template slot-scope="scope">
      <el-select
        v-model="scope.row.managerName"
        clearable
        filterable
        remote
        :remote-method="queryFZR"
        style="width: 100px;"
        placeholder="输入搜索"
        @change="changeRowManager($event,scope.row)"
        :title="scope.row.managerName"
        :disabled="scope.row.status!==1"
      >
        <el-option
          v-for="item in fzrOptions"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
          <span style="float:left;">{{ item.label }}</span>
          <span style="float:right;color: #2f74d7;font-size:12px!important;">{{ item.orgName }}</span>
        </el-option>
      </el-select>
    </template>
  </el-table-column>
  <el-table-column
    label="PMO"
    width="140"
  >
    <template slot-scope="scope">
      <el-select
        v-model="scope.row.pmoName"
        clearable
        filterable
        remote
        :remote-method="queryFZR"
        style="width: 100px;"
        placeholder="输入搜索"
        @change="changeRowPMO($event,scope.row)"
        :title="scope.row.pmoName"
        :disabled="scope.row.status!==1"
      >
        <el-option
          v-for="item in fzrOptions"
          :key="item.id"
          :label="item.label"
          :value="item.id"
        >
          <span style="float:left;">{{ item.label }}</span>
          <span style="float:right;color: #2f74d7;font-size:12px!important;">{{ item.orgName }}</span>
        </el-option>
      </el-select>
    </template>
  </el-table-column>
  <el-table-column
    label="省公司-责任处室"
    width="190"
    :show-overflow-tooltip="true"
  >
    <template slot-scope="scope">
      <el-select v-model="scope.row.provinceDutyDept" size="small" placeholder="请选择" style="width: 150px;" :title="scope.row.provinceDutyDept" :disabled="scope.row.status!==1">
        <el-option
          v-for="item in internetDepartments"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </template>
  </el-table-column>
  <el-table-column
    prop="internetChargeName"
    label="公司互联网部负责人"
    width="140"
  >
    <template slot-scope="scope">
      <el-input
        v-model="scope.row.internetChargeName"
        size="small"
        placeholder="请输入"
        clearable
        maxlength="100"
        style="width: 100px"
        @change="changeCol(scope.row)"
        :disabled="scope.row.status!==1"
      />
    </template>
  </el-table-column>
  <el-table-column
    prop="provinceDeptName"
    label="省公司业务主管部门"
    width="190"
  >
    <template slot-scope="scope">
      <el-select v-model="scope.row.provinceDeptName" size="small" placeholder="请选择" style="width: 150px;" :title="scope.row.provinceDeptName" :disabled="scope.row.status!==1">
        <el-option
          v-for="item in internetDepartments"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </template>
  </el-table-column>
  <el-table-column
    prop="provinceChargeName"
    label="省公司业务主管部门项目负责人"
    width="140"
  >
    <template slot-scope="scope">
      <el-input
        v-model="scope.row.provinceChargeName"
        size="small"
        placeholder="请输入"
        clearable
        maxlength="100"
        style="width: 100px"
        @change="changeCol(scope.row)"
        :disabled="scope.row.status!==1"
      />
    </template>
  </el-table-column>
  <el-table-column
    label="可研报告文件"
    width="100"
    :show-overflow-tooltip="true"
  >
    <template slot-scope="scope">
      <el-link v-if="scope.row.reportFileId" @click="downloadFile(scope.row.reportFileId,scope.row.reportFileName)">{{ scope.row.reportFileName }}</el-link>
      <el-upload
        v-else
        ref="fileUploadEle"
        class="upload-demo"
        action="#"
        :show-file-list="false"
        :multiple="false"
        :data="scope.row"
        :http-request="uploadReportRequest"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </template>
  </el-table-column>
  <el-table-column
    label="可研批复文件"
    width="100"
    :show-overflow-tooltip="true"
  >
    <template slot-scope="scope">
      <el-link v-if="scope.row.replyFileId" @click="downloadFile(scope.row.replyFileId,scope.row.replyFileName)">{{ scope.row.replyFileName }}</el-link>
      <el-upload
        v-else
        ref="fileUploadEle"
        class="upload-demo"
        action="#"
        :show-file-list="false"
        :multiple="false"
        :data="scope.row"
        :http-request="uploadReplyRequest"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </template>
  </el-table-column>
  <el-table-column
    label="文件同步状态"
    width="100"
    align="center"
    :show-overflow-tooltip="true"
  >
    <template slot-scope="scope">
      <el-tag v-if="scope.row.fileSyncStatus===1" type="warning">未同步</el-tag>
      <el-tag v-if="scope.row.fileSyncStatus===2" >同步中</el-tag>
      <el-tag v-if="scope.row.fileSyncStatus===3" type="success">已同步</el-tag>
    </template>
  </el-table-column>
  <el-table-column
    label="数据状态"
    width="50"
    align="center"
    :show-overflow-tooltip="true"
  >
    <template slot-scope="scope">
      <el-tooltip v-if="scope.row.status===1" effect="dark" content="可编辑" placement="top">
        <i class="el-icon-edit" ></i>
      </el-tooltip>
      <el-tooltip v-if="scope.row.status===2" effect="dark" content="已提交" placement="top">
        <i class="el-icon-check" ></i>
      </el-tooltip>
      <el-tooltip v-if="scope.row.status===3" effect="dark" content="已锁定" placement="top">
        <i class="el-icon-lock" ></i>
      </el-tooltip>
    </template>
  </el-table-column>
  <el-table-column label="操作" width="150" align="center" fixed="right">
    <template slot-scope="scope">
      <el-link v-if="scope.row.status===1" @click="commit(scope.row)">提交</el-link>
      <el-link style="margin-left: 10px;" v-if="scope.row.status!==1&&judgePermission('hnpm:plan:proresolve:unlock')" @click="unlock(scope.row.id)">解锁</el-link>
      <el-link style="margin-left: 10px;" v-if="scope.row.status===1&&judgePermission('hnpm:plan:proresolve:delete')" @click="deleteItem(scope.row.id)">删除</el-link>
    </template>
  </el-table-column>
</el-table>

//script精简
methods: {
//行样式
rowClassName({ row, column, rowIndex, columnIndex }) {
  if (row.status != 1) {
    return 'row-lock'
  }
},
}
//一般组件样式中加scope防止组件间样式污染，但是在这里不能加scope，需要全局样式才能生效
<style>
.row-lock{
    background-color: #E5E5E5;
    color: #000;
}
</style>