给页面添加分页

给页面添加分页功能

使用elementUI框架，给表单添加分页，效果如下图所示
在这里插入图片描述

现将分页引入到自己的页面中

<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>

现在将数据进行修改，
a.先调接口
我这里的接口返回的不是json
在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.在mounted里面调用这个方法

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

c.在data里面定义page（当前页），rows（每页显示的条数），total（总数）

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

d.修改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.修改methods里面的@size-change，@current-change方法

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

这样就全部OK了

给页面添加分页功能

猜你喜欢