el-table 显示序号

2018-05-03  本文已影响106人  赛亚人之神

html

<el-table :data="tableData" stripe border :row-class-name="tableRowClassName">
              <el-table-column
                prop="module"
                :formatter="formatter"
                label="序号"
                width="50">
              </el-table-column>
</el-table>

javascript

// 在method 中加入如下方法:其中 tableRowClassName 的入参用到了析构
tableRowClassName({row, rowIndex}) {
        // 把每一行的索引放进row
        row.rowIndex = rowIndex
      },

      formatter(row, column, cellValue, index) {
        //放回索引值
        return this.param.page.pageSize * (this.param.page.pageNum - 1)  + 1 + row.rowIndex;
      },

说明:

row-class-name  行的 className 的回调方法, 也可以使用字符串为所有行设置一个固定的 className。  
类型: Function({row, rowIndex})/String
上一篇 下一篇

猜你喜欢

热点阅读