欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue table排序 (正序&倒序

程序员文章站 2022-03-21 21:34:50
...

vue table排序 (正序&倒序

正序

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

<el-table-column label="序号" width="50px" align="center">
    <template slot-scope="scope">
        {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
    </template>
</el-table-column>

倒序

{{total - ((currentPage-1)*pageSize) - scope.$index}} // 总条数 - (当前页 - 1) * 当前显示数据条数 - 当前行数据的索引

<el-table-column
        label="序号"
        type="index"
        width="80px">
    <template slot-scope="scope">
        <span>{{total - ((queryParams.pageNum-1)*queryParams.pageSize) - scope.$index}}</span>
    </template>
</el-table-column>

页码代码

<pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

表格无翻页排序
list.length - scope.$index

      <el-table stripe
                  v-loading="loading"
                  :data="resultList">
          <el-table-column width="35"
                           align="center" />
          <el-table-column label="Step"
                           width="60"
                           type="index">
            <template slot-scope="scope">
              <span>{{resultList.length - scope.$index}}</span>
            </template>
            </el-table >