ElementUI BootStrap table 自定义序号

ElementnUI  table 自定义序号

elementUI table组件自带序号这样写：

<el-table-column align="center" 
                 type="index" 
                 width="50" 
                 label="序号" 
                 fixed="left"></el-table-column>

分页符像这样

<el-pagination background 
               @size-change="handleSizeChange" 
               @current-change="handleCurrentChange" 
               :current-page="listQuery.page" // 当前页
               :page-sizes="[10,20,30, 50]" 
               :page-size="listQuery.pageSize" // 每页显示行数
               layout="total, sizes, prev, pager, next, jumper" 
               :total="total"></el-pagination>

这样写点击切换当前页时，每一页的序号都是从1开始的

如果想要整个表格的序号自定义增长，可以自定义序列号(elementUI table)

<el-table-column align="center" 
                 type="index" 
                 width="50" 
                 label="序号" 
                 fixed="left">
   <template slot-scope="scope">
     <span>{{(listQuery.page - 1) * listQuery.pageSize + scope.$index + 1}}</span>
   </template>
</el-table-column>

其中listQuery.page就是当前页数，listQuery.pageSize就是每页行数

关键代码像这样

(page - 1) * pageSize + scope.$index + 1 // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1

 

 bootstrap  table 自定义序号

其原理都是通过当前表格的page和size去计算当前行的序号，直接在传入的columns数组中定义：

columnsDataDriver: [
        {
          field: 'no',
          title: '序号',
          align: 'center',
          formatter: function (value, row, index) {
            var pageSize = totalreport.data.queryData.size;     //每页多少条，全局定义的变量
            var pageNumber = totalreport.data.queryData.page; //当前第几页，全局定义的变量
            return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
          }
        },
        {
          field: "statisticsTime",
          title: "统计时间",
        },
        {
          field: "owersName",
          title: "分析对象",
        },
]

 如果不是像我这样将表格的page、size定义为全局变量，那么就要使用bootstrap table的API(getOptions)去获取表格的page和size，然后计算当前的序号