如何显示带状态表格

[snowdream]

问题描述 Describe the bug https://element.eleme.cn/#/zh-CN/component/table 参考这个，使用vue-element-extends实现状态表格

但是按照下面步骤实现后，没有出现彩色状态背景，只是白色背景。

重现问题的步骤 To Reproduce html

 <elx-editable
      v-loading="listLoading"
      ref="editable"
      :key="tableKey"
      :data.sync="list"
      :edit-config="{trigger: 'click', mode: 'cell',activeMethod}"
      :edit-rules="{name: [{required: true, message: 'Please enter a name.', trigger: 'blur'}]}"
      :row-class-name="tableRowClassName"
      class="table-tixing"
      size="mini"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange">
      <elx-editable-column label="操作" align="center" width="148" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleSave(scope.row)">保存</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </elx-editable-column>
      <elx-editable-column :edit-render="{name: 'ElSelect', options: kacheCheTouCheGuaOptions}" label="车头车挂" prop="kache[0].chetouchegua" align="center" width="70"/>
      <elx-editable-column label="车头车牌" prop="kache[0].chetouchepai" width="100" align="center"/>
      <elx-editable-column label="车挂车牌" prop="kache[0].cheguachepai" width="100" align="center"/>
      <elx-editable-column label="挂靠公司" prop="kache[0].guakaomingjiancheng" width="100" align="center"/>
      <elx-editable-column label="司机姓名" prop="kache[0].chezhuxingming" width="100" align="center"/>
      <elx-editable-column label="司机手机号" prop="kache[0].chezhushoujihao" width="100" align="center"/>
      <elx-editable-column
        :edit-render="{name: 'ElSelect', options: xiangmuOptions}"
        label="项目"
        prop="xiangmu"
        align="center"
        width="100"/>
      <elx-editable-column
        :edit-render="{name: 'ElInput'}"
        label="服务商"
        prop="fuwushang"
        align="center"
        width="100"/>
      <elx-editable-column
        :edit-render="{name: 'ElDatePicker', attrs: {type: 'date', format: 'yyyy年MM月dd日'}}"
        :formatter="formatterDate"
        label="开始日期"
        width="120"
        prop="kaishiriqi"
        align="center"/>
      <elx-editable-column
        :edit-render="{name: 'ElDatePicker', attrs: {type: 'date', format: 'yyyy年MM月dd日'}}"
        :formatter="formatterDate"
        label="结束日期"
        width="120"
        prop="daoqiriqi"
        align="center"/>
      <elx-editable-column
        :edit-render="{name: 'ElInput'}"
        label="费用"
        width="100"
        prop="feiyong"
        align="center"/>
      <elx-editable-column
        :edit-render="{name: 'ElSelect', options: zhuangtaiOptions}"
        label="状态"
        prop="zhuangtai"
        align="center"
        width="80"/>
      <elx-editable-column
        :edit-render="{name: 'ElInput'}"
        label="备注"
        width="250px"
        prop="beizhu"
        align="center"/>
    </elx-editable>

js

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'warning-row'
      } else if (rowIndex === 1) {
        return 'success-row'
      }
      return ''
    },

css

<style scoped>
  .pane-container{
    margin: 10px;
  }

  .table-tixing .warning-row {
    background: #f0f9eb;
  }

  .table-tixing .success-row {
    background: #f0f9eb;
  }
</style>

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

报错信息或截图 Error message or screenshots

期望的结果 Expected behavior 显示带状态彩色表格。

请填写以下版本信息 please complete the following information

• vue: 2.6.9
• element-ui: 2.4.6
• vue-element-extends: 1.2.12

[xuliangzhan]

你应该查看 element 的使用方式

<style>

  .table-tixing .warning-row {
    background: #f0f9eb;
  }

  .table-tixing .success-row {
    background: #f0f9eb;
  }
</style>

[snowdream]

@xuliangzhan 感谢