element table 在指定行添加类无效

Question

官方的例子是这样的

<template>
  <el-table
    :data="tableData2"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      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>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

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

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

但是发现这么写打印的 rowIndex是undefined为什么
我看有人说只写一个参数可以解决这个问题
但是只写一个参数打印出来确是

<template>
<el-table :data="tableData" :row-class-name="tableRowClassName" border style="width:100%">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column prop="basic-info" label="基本资料" style="width:10%">
    </el-table-column>
    <el-table-column prop="group" label="粉丝分组"></el-table-column>
    <el-table-column label="个性标签">
    </el-table-column>
    <el-table-column prop="rate" label="粉丝发送/公众号发送"></el-table-column>
    <el-table-column prop="nearest_interaction" label="最近互动时间"></el-table-column>

    <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            v-on:click.native.prevent="deleteRow(scope.$index, tableData4)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
    </el-table-column>
</el-table>
</template>

<style lang="sass" scoped>
  .el-table .warning-row
    background: #555555

  .el-table .success-row
      background: #ffffff


</style>

<script>
export default {
    methods: {
        deleteRow(index, rows) {
            rows.splice(index, 1)
        },
        tableRowClassName(row) {
            console.log(row);
            if (row === 2) {
                return 'warning-row'
            } else {
                return 'success-row'
            }
        }
    },
    data() {
        return {
            tableData: [{
                    basic_info: {
                        photo: '',
                        nickname: '啦啦啦',
                        address: '北京 朝阳',
                        gendar: 0
                    },
                    group: '未分组',
                    user_tags: ['动漫', '娱乐', '追剧狂魔'],
                    rate: '1000/3900020',
                    nearest_interaction: '2018-02-01'
                },
                {
                    basic_info: {
                        photo: '',
                        nickname: '啦啦啦',
                        address: '北京 朝阳',
                        gendar: 0
                    },
                    group: '未分组',
                    user_label: ['动漫', '娱乐', '追剧狂魔'],
                    rate: '1000/3900020',
                    nearest_interaction: '2018-02-01'
                },
                {
                    basic_info: {
                        photo: '',
                        nickname: '啦啦啦',
                        address: '北京 朝阳',
                        gendar: 0
                    },
                    group: '未分组',
                    user_label: ['动漫', '娱乐', '追剧狂魔'],
                    rate: '1000/3900020',
                    nearest_interaction: '2018-02-01'
                }
            ]
        }
    }
}
</script>

Answer 1

element-ui的版本不对，你用的是1.x的

1.x的用法

tableRowClassName(row, index) {
    if (index === 1) {
      return 'info-row';
    } else if (index === 3) {
      return 'positive-row';
    }
    return '';
  }