Add pagination to the page

Add pagination function to the page

Use the elementUI framework to add pagination to the form. The effect is as shown below

1. Now introduce pagination into your own page

<template>
	<el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="currentPage4" //当前页数
	      :page-sizes="[100, 200, 300, 400]" //每页显示个数选择器的选项设置
	      :page-size="100"  //每页显示的条数
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="400" //总条数
	      >
	    </el-pagination>
   </template>
   <script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      };
    }
  }
</script>

2. Now modify the data,
   a. First adjust the interface.
   The interface here does not return json.
   Customize a method in methods.

// 获取日志列表数据
methods:{
	    QuerySysLogTable() {
	      var newFormData = new FormData();
	      newFormData.append("page", this.page);
	      newFormData.append("rows", this.rows);
	      newFormData.append("tableName", "syslog");
	      newFormData.append("pagination", "1");
	      newFormData.append("columnsExists", "0");
	      this.$api.QuerySysLogTable(newFormData).then((res) => {
	        // console.log(res);
	        this.list = res.data;
	        this.total = res.total;//获取页面的总数据
	      });
	    },
	}

b. Call this method in mounted

mounted() {
    // 获取日志列表数据
    this.QuerySysLogTable();
  },

c. Define page (current page), rows (number of items displayed on each page), and total (total number) in data.

data() {
    return {
      list: [], //数据列表
      page: 1, //当前页
      rows: 10, //每页的条数
      total: 0, //总数
    };
  },

d. Modify the data in the template

<!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70, 100]"
        :page-size.sync="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px"
      >
      </el-pagination>

e. Modify the @size-change and @current-change methods in methods

methods:{
 // 每页显示的条数
    handleSizeChange(val) {
      this.rows = val;
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.page = val;
    },
   }

That's all OK