在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/測試  HTML/ element table 在指定行添加類無效

element table 在指定行添加類無效

官方的例子是這樣的

<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: '上海市普陀區(qū)金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

但是發(fā)現(xiàn)這么寫打印的 rowIndex是undefined為什么
我看有人說只寫一個參數(shù)可以解決這個問題
但是只寫一個參數(shù)打印出來確是

clipboard.png

<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="粉絲發(fā)送/公眾號發(fā)送"></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>
回答
編輯回答
北城荒

element-ui的版本不對,你用的是1.x的

1.x的用法

tableRowClassName(row, index) {
    if (index === 1) {
      return 'info-row';
    } else if (index === 3) {
      return 'positive-row';
    }
    return '';
  }
2017年12月9日 04:41