美文网首页
el-table 显示序号

el-table 显示序号

作者: 赛亚人之神 | 来源:发表于2018-05-03 13:28 被阅读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
    

    相关文章

      网友评论

          本文标题:el-table 显示序号

          本文链接:https://www.haomeiwen.com/subject/rdbkrftx.html