Vue element 分页使用

Vue element 分页使用

1、定义分页组件

<template>
  <div style="text-align:center;margin:20px">
    <el-pagination
    background
    layout="total,prev, pager, next,jumper"
    :total="total" :page-size="pageSize" @current-change="changePage" >
    </el-pagination>
  </div>
</template>

<script>
/** 
 * 分页插件 
 *  调用者使用方法：
 *    1、引用该组件
 *      import Pagination from '../../components/pagination.vue';
 * 		components: { Pagination }
 *    2、使用该组件
 *      <pagination :total="total" :pageSize="pageSize" @changePage="changePage"></pagination>
 *    3、返回两个参数total、pageSize
 *      return {
 *         total: 100,
 *         pageSize: 10
 *      }
 *    4、创建一个方法changePage()并接收一个参数 num--当前页码
 *      methods:{
 *        //分页--跳转指定页面
 *        changePage(num){
 *          console.log(num)
 *        }
 *      }
 */
export default {
  props:{
    total:{//总记录数-默认100条
      type:Number,
      default:100
    },
    pageSize:{//每页显示条数-默认10条
      type:Number,
      default:10
    }
  },
  methods:{
    changePage(page){
      this.$emit('changePage',page);
    }
  }

}
</script>

<style>

</style>

2、调用者

<template>
  <div class="continer">
  
    <!-- 展示列表 -->
    <div class="list">
        <el-table :data="employees" border style="width: 100%">
           <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column prop="employeeId" label="编号" width="180"></el-table-column>
          <el-table-column prop="employeeName" label="姓名" width="180"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="role" label="职位"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="idNo" label="身份证"></el-table-column>
          <el-table-column prop="isAdminCn" label="是否为管理员"></el-table-column>
          <el-table-column prop="isLeave" label="是否离职"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="total" :pageSize="pageSize" @changePage="changePage"></pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Pagination from '../../components/pagination.vue';

export default {
  components: { Pagination },
  //返回的数据部分
  data() {
      return {
        ruleForm: {
          employeeName: '',
          sex: 'M',
          isAdmin: 'n',
          isLeave: 'n',
          phone: '',
          idNo: '',
          entryDate: '',
          birthday: ''
        }formLabelWidth: '80px',
        total: 100,
        pageSize: 10
      }
  },
  //创建的时候调用该方法
  created(){
    //获取员工分页列表
    this.getPage(1)
  },
  //计算属性
  computed:{
    /**
     * 把请求到的数据渲染到页面:
     * 拿到mpaState的两种情况：
     *  1、state在store/index.vue里： 直接 ...mapState(['list','idText'])
     *  2、state在store/user.vue里：不能用数组接收，要用一个对象接收，譬如：
     *     ...mapState({
     *       list : state => state.employee.list
     *     })
     */
    // ...mapState(['list','idText'])
    ...mapState({
      employees : state => state.employee.employees
    })
  },
  methods: {
    //分页--跳转指定页面
    changePage(num){
      this.getPage(num)
    },
    //封装请求
    getPage(num){
      this.$store.dispatch('employee/getPageList',num).then((res) => {
      		//res.total、res.size分别为总记录数和每页条数，请根据服务器返回的data数据结构进行填写
        this.total = res.total
        this.pageSize = res.size
      })
    }
  }
};
</script>

<style>

3、store部分 src/store/modules/employee.js

import { getEmployeeList,getPageList,getEmployeeByIdOrName,getRoleList,insert } from '@/api/employee'

const state = {
  employees:[], //员工列表
  page:{//分页信息
    pageNo: 1, // 当前页
    pageSize: 10 // 每页条数
  }
}

const mutations = {
  setEmployees(state,employees){
    state.employees=employees
  },
  /** 设置分页页码 */
  setPageNo(state,pageNo){
    state.page.pageNo = pageNo
  }

}

const actions = {
  getEmployeeList({ commit }) {
    return new Promise((resolve, reject) => {
      getEmployeeList().then(response => {
        const { data } = response
        commit('setEmployees',data)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  /** 分页查询-按页码-默认每页10条数据 */
  getPageList({commit},pageNo){
    // 记录当前页
    commit('setPageNo',pageNo)
    // 发送请求
    return new Promise((resolve, reject) => {
      getPageList(state.page).then(response => {
        // console.log(response)
        // console.log(response.data.records)
        commit('setEmployees',response.data.records)
        resolve(response.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

4、api请求部分

import request from './request.js'

export function getEmployeeList(){
    return request({
        url: '/employee/list',
        method: 'get',
        params:{}
    });
}

export function getPageList(data){
    console.log("get api start")
    return request({
        url: '/employee/getPageList',
        method: 'post',
        data
    });
}