JAVA高级面试进阶训练营视频教程

admin

先看代码：

<el-table :data="tableData" style="width: 100%" stripe size="medium" @sort-change="changeSort">

            <el-table-column label="序号" width="80">

            <!-- 这是添加分页时有连接的序号 -->

              <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) *size + 1}} </span></template>

            </el-table-column>

            <!-- 这是添加排序 -->

            <el-table-column prop="date" label="时间" sortable="custom" ref="dateSort">

            </el-table-column>

</el-table>

<!-- 分页 -->

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[ 10, 20, 40]" :page-size="size"  :total="total" ></el-pagination>

1.序号

{{scope.$index+(currentPage - 1) *size + 1}}

2.清除排序

 this.$refs.dateSort.columnConfig.order = '';

3.解决删除最后一项时分页出现问题（数据为空）

思路：当页面总条数 = （当前页数-1）*当前页条数，currentPage减1，重新获取列表；

watch:{
      total(){
        if(this.total==(this.currentPage-1)*this.size&& this.total!=0){
          this.currentPage-=1;
          this.getTableData();//获取列表数据
        }
      }
    }