Vue 基于ElementUI 封装table表格组件 + pagination分页组件

Posted 2021-09-23 在奋斗的大道

效果展示:

状态页面

 用户页面

Vue 源码:

定义封装组件：Pagination.vue

<template>
  <div>
  <el-table height="520" :data="tableData" style="width: 100%" border>
    <template v-for="(item, index) in columnData">
      <el-table-column
        :prop="item.prop"
        :key="index"
        :label="item.label"
      >
      </el-table-column>
    </template>
  </el-table>
  <el-pagination
    class="pg"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pagesize"
    :total="total"
    background
  ></el-pagination>
</div>

</template>

<script>
export default {
  props: {
    // 分页数据总数
  total: {
    type: Number,
    default: 1000,
    required: false
  },
  // 单页数据量
  pagesize: {
    type: Number,
    default: 10,
    required: false
  },
  // 当前页码
  currentPage: {
    type: Number,
    default: 1,
    required: false
  },
  // 表格数据
  tableData: {
    type: Array,
    default: ()=>[],
    required: false
  },
  // 表头数据
  columnData: {
    type: Array,
    default: ()=>[],
    required: false
  }
  },
  data() {
    return {};
  },
  methods: {
   // 以下两个函数均是触发父组件的handleChange事件，从而实现点击分页的功能按钮后，子组件向父组件传参
  handleCurrentChange: function (currentPage) {
    this.$emit('handleChange', this.pagesize, currentPage)
  },
  handleSizeChange: function (pageSize) {
    this.$emit('handleChange', pageSize, this.currentPage)
  }

  },
};
</script>
<style scoped>
.pg {
  margin: 5px;
  text-align: right;
}
</style>

调用封装组件：user.vue

<style>
.pg-div {
  margin: auto;
  width: 100%;
}
</style>
<template>
<div class='pg-div'>
  <Pagination  :columnData="columnData"
    :tableData="tableDataList"
    :total="totalNum"
    :pagesize="pagesizeNum"
    :currentPage="currentPageNum"
    @handleChange="handleChangeData"
    />
</div>
</template>
 
<script>
import Pagination from "@/components/Pagination";
 import {getUserList} from "@/api/user";

export default{
    name: 'user',
    data() {
    return {
      columnData:[], // 表头数据，引用于mock数据
      tableDataList: [], // 分页后的表格数据
      totalNum: 24, // 数据总数
      pagesizeNum: 10, // 单页数据量
      currentPageNum: 1 // 当前页码
    };
    },
    components:{
        Pagination
    },
    created() {
      this.getData()
    },
    methods:{
        // 获取子组件传来修改后的pagesize和currentPage，改变数据页码或每页条目，进而请求新数据
    handleChangeData (pagesize, currentPage) {
      console.log("pagesize", pagesize)
      this.pagesizeNum = pagesize
      this.currentPageNum = currentPage
      this.getData()
    },

    getData(){
         var params ={
          'pageNum': this.currentPageNum,
          'pageSize': 10,
         }
        getUserList(this.$qs.stringify(params)).then(res => {
                console.log(res)
                this.columnData = [{"label":"姓名", "prop":"name"}]
                // 把请求到的数据给testDatas数组
                this.tableDataList = res.data.list
                // 当前页数
                this.currentPageNum = res.data.pageNum
                // 当前页数量
                this.pagesizeNum = res.data.pageSize
                // 分页总数
                this.totalNum = res.data.total
              //   console.log(JSON.stringify(res.data.data.total))
            })
            .catch((error) => {
             console.log(error)
            })
        }
        
    }

}
</script>

state.vue 

<style>
.pg-div {
  margin: auto;
  width: 100%;
}
</style>
<template>
<div class='pg-div'>
  <Pagination  :columnData="columnData"
    :tableData="tableDataList"
    :total="totalNum"
    :pagesize="pagesizeNum"
    :currentPage="currentPageNum"
    @handleChange="handleChangeData"
    />
</div>
</template>
 
<script>
import Pagination from "@/components/Pagination";
 import {getStateList} from "@/api/state";

export default{
    name: 'user',
    data() {
    return {
      columnData:[], // 表头数据，引用于mock数据
      tableDataList: [], // 分页后的表格数据
      totalNum: 24, // 数据总数
      pagesizeNum: 10, // 单页数据量
      currentPageNum: 1 // 当前页码
    };
    },
    components:{
        Pagination
    },
    created() {
      this.getData()
    },
    methods:{
        // 获取子组件传来修改后的pagesize和currentPage，改变数据页码或每页条目，进而请求新数据
    handleChangeData (pagesize, currentPage) {
       console.log("pagesize", pagesize)
      this.pagesizeNum = pagesize
      this.currentPageNum = currentPage
      this.getData()
    },

    getData(){
         var params ={
          'pageNum': this.currentPageNum,
          'pageSize': 10,
         }
        getStateList(params).then(res => {
                console.log(res)
                this.columnData = [{"label":"状态名称", "prop":"name"}]
                // 把请求到的数据给testDatas数组
                this.tableDataList = res.data.list
                // 当前页数
                this.currentPageNum = res.data.pageNum
                // 当前页数量
                this.pagesizeNum = res.data.pageSize
                // 分页总数
                this.totalNum = res.data.total
              //   console.log(JSON.stringify(res.data.data.total))
            })
            .catch((error) => {
             console.log(error)
            })
        }
        
    }

}
</script>

api 定义:user.js 和state.js

import request from '@/utils/request'

export function getStateList(params) {
    return request({
      url: '/state/page',
      method: 'get',
      params
    })
  }

import request from '@/utils/request'

export function getUserList(data) {
    return request({
      url: '/user/page',
      method: 'post',
      data
    })
  }

 axios 封装:request.js

import { Message, MessageBox } from "element-ui";
import axios from 'axios';

const service = axios.create({
    baseURL: 'http://192.168.1.74:8081/crm',
    timeout: 15000  // 请求超过15秒就报错
  })

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  // request拦截器
service.interceptors.request.use(config => {
  
    return config
  }, error => {
    // 当请求错误时
    console.log(error)
    Promise.reject(error)
  })
  
  // response拦截器
  service.interceptors.response.use(
    response => {
      const res = response.data
      // if !200 start
      if (res.code !== 200) {
        Message({
          message: res.massage,
          type: 'error',
          duration: 3 * 1000
        })
  
        // code = 401 表示未登录
        // if 401 start
        if (res.code === 401) {
          MessageBox.confirm('登录失效，请重新登录', '确认登出', {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            
          })
        } // if 401 end
        return Promise.reject('error')
      } else { // if !200 end
        return response.data
      }
    }, // response end
  
    error => {
      console.log('err' + error)
      Message({
        message: error.message,
        type: 'error',
        duration: 3 * 1000
      })
      return Promise.reject(error)
    }
  )
  
  export default service

SpringBoot 后台接口：

后台下载地址: