el-pagination Dynamically switch the number of entries per page, page number switching

Table of contents

Business scene

official link

achieve effect

use frame

code display

template code

script code

Variable definitions

event definition

        handleSizeChange event--realize the dynamic change of the table by changing the number of items per page

        handleCurrentChange event--switch page number

        css code

full code

Summarize

---

Business scene

When the amount of data in the table is very large, it is impossible for us to display all the data at once, causing the user to scroll the mouse down infinitely, causing the user to be unclear about how much data there is, and causing the user to be unable to see Anxiety at the end. At this time, we can use the pager to achieve the paging effect of the data, and realize the real paging according to the number of pages and the number of entries per page.

This is a scene that is often used in projects. Today I will share our specific implementation and some points that need attention.

official link

Pagination: Pagination | Element Plus

achieve effect

What this blog wants to achieve is a binding relationship between courses and classes. When the page is loaded, give the course and class drop-down boxes a default value. After switching the options in the class drop-down box, the options in the class drop-down box will also change accordingly. Success, all class names under the currently selected course

use frame

Vue3+element-plus(1.2.0-beta.5)

code display

Explanation: When I focus on sharing the pager in this blog, you can refer to this blog about the el-table table: Dynamic display and hiding of el-table columns_Pacman's Dinosaur Blog-CSDN Blog

template code

<!-- 分页器 -->
<div class="demo-pagination-block">
    <span class="demo-pagination-block allTotal">共{
   
   { total }}条</span>
    <el-config-provider :locale="locale">
      <el-pagination
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[30, 50, 100]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-config-provider>
</div>

script code

Variable definitions

var total = ref(0); //总条数

// 当前页数
const currentPage = ref(1);

//每页显示条目个数
const pageSize = ref(30);

//是否使用小型分页样式
const small = ref(false);

//是否为分页按钮添加背景色
const background = ref(false);

//是否禁用分页
const disabled = ref(false);

event definition

handleSizeChange event--realize the dynamic change of the table by changing the number of items per page

//每页显示条数改变
const handleSizeChange = (val) => {
      searchContent.value = "";
      pageSize.value = val;
      currentPage.value = currentPage.value;    
};

handleCurrentChange event--switch page number

 //当前页变动
    const handleCurrentChange = (val) => {
      pageSize.value = pageSize.value;
      currentPage.value = val;
      studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
    };

css code

.demo-pagination-block {
  display: inline-block;
  position: relative;
}

.allTotal {
  position: absolute;
  left: -4em;
  top: 7px;
  color: #606266;
  font-size: 14px;
}

full code

<template>
    <!-- 分页器 -->
    <div class="demo-pagination-block">
        <span class="demo-pagination-block allTotal">共{
   
   { total }}条</span>
        <el-config-provider :locale="locale">
          <el-pagination
            :total="total"
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[30, 50, 100]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
    </div>
</template>

<script>
import { reactive, ref, onMounted } from "vue";

export default {
  components: {
  },
  setup() {
	//总条数
    var total = ref(0); 

    // 当前页数
    const currentPage = ref(1);
    
    //每页显示条目个数
    const pageSize = ref(30);
    
    //是否使用小型分页样式
    const small = ref(false);
    
    //是否为分页按钮添加背景色
    const background = ref(false);
    
    //是否禁用分页
    const disabled = ref(false);
      
	//每页显示条数改变
	const handleSizeChange = (val) => {
          searchContent.value = "";
          pageSize.value = val;
          currentPage.value = currentPage.value;    
	};


 	//当前页变动
    const handleCurrentChange = (val) => {
          pageSize.value = pageSize.value;
          currentPage.value = val;
          studentData(classID.value, courseID.value, currentPage.value, pageSize.value);
    };


    return {
      total,
        currentPage,
        pageSize,
        small,
        background,
    	disabled,
        handleSizeChange,
        handleCurrentChange,
    };
  },
};
</script>

<style>
    .demo-pagination-block {
      display: inline-block;
      position: relative;
    }
    
    .allTotal {
      position: absolute;
      left: -4em;
      top: 7px;
      color: #606266;
      font-size: 14px;
}

</style>

For the implementation of the current page, please refer to the following blog:

el-table: Dynamic display and hiding of el-table columns - Programmer Sought

el-Dropdown：http://t.csdn.cn/jFp2f

Summarize

Read more official documents, many of the problems we encountered are actually detailed in the documents.

If you want to exchange content, please leave a message in the comment area . If this document is liked by you, please leave your likes and collection footprints to support the blogger~