Vue implements table paging function

This article example shares the specific code of Vue to realize the table paging function for your reference. The specific content is as follows

Directly on the code:

Here is the template part, which mainly consists of a table that needs to be paginated and a paginator. The key point is that the data attribute of the table uses a slice interception method.

<el-table
        v-loading="listLoading"
        :data="
          list.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        element-loading-text="Loading"
        highlight-current-row
        border
      >
        <el-table-column align="center" label="Serial number" width="90">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="Avatar" align="center" width="150">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column align="center" label="UID" width="130">
          <template slot-scope="scope">
            {{ scope.row.UID }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="Username" width="350">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="Game ID" width="350">
          <template slot-scope="scope"> {{ scope.row.usernick }} </template>
        </el-table-column>
        <el-table-column label="Authorization type" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.authorizationType | tagTypeFilter">{{
              scope.row.authorizationType | authorizationTypeFilter
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="Number of successful invitations" width="150">
          <template slot-scope="scope">{{ scope.row.successNum }} </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="Operation" width="150">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="change(scope.$index, scope.row)"
            >
              Modify</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- Paginator -->
      <div class="block" style="margin-top: 15px">
        <el-pagination
          align="right"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, total"
          background
          :total="filterList.length"
          hide-on-single-page
        >
        </el-pagination>
</div>

Here is the javascript part:

export default{
    data(){
        return {
            currentPage:1//Current page number pageSize:10//Number of items to be displayed per page list:[]//Table data to be displayed}
        }
 
    methods{
            handleCurrentChange(val) {
            this.currentPage = val;
        },
    }
 
}

Achieve the effect as shown in the figure

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: