【Vue2 + ElementUI】分页el-pagination 封装成公用组件

  1. 效果图
  2. 实现
    (1)公共组件
bash 复制代码
<template>
    <nav class="pagination-nav">
        <el-pagination class="page-area" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :background="background" :page-sizes="[100, 200, 300, 400, 500, 600, 700, 800]"
            :page-size="pageSize" :layout="layout" :total="totalSize">
        </el-pagination>
    </nav>
</template>
  
<script>
export default {
    data() {
        return {
            layout: "total, sizes, prev, pager, next, jumper",
            background: "background",
        }
    },
    props: {
        totalSize: {        // 数据总条数
            type: Number,
            default: 0
        },
        pageSize: {         // 每页显示条数
            type: Number,
            default: 10
        },
        currentPage: {      // 当前页码
            type: Number,
            default: 1
        },
    },
    methods: {
        /**
         * 当前是第几页
         * @param {Int} val 
         */
        handleCurrentChange(val) {
            this.$emit('handlePageChange', { pageNum: val, pageSize: this.pageSize })
        },

        /**
         * 每页多少条
         * @param {Int} val 
         */
        handleSizeChange(val) {
            this.$emit('handlePageChange', { pageNum: 1, pageSize: val })
        },
    }
}
</script>
  
<style lang="less">
.pagination-nav {
    background-color: #FFF;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #E6F0FE;
        color: #023FB5;
    }
}
</style>

(2)页面使用

bash 复制代码
<template>
	<div style="position: sticky;bottom: 2px;">
        <Pagination 
        :current-page="query.current" 
        :page-size="query.size" 
        :totalSize="totalSize"
        @handlePageChange="handlePageChange" />
	</div>
</template>

<script>
import Pagination from "@/component/pagination.vue";
import { getList } from "@/api/xxx"
export default{
	components:{Pagination},
	data(){
		return{
			list:[],
			listLoading:false,
		    query: {
        		current: 1,
        		size: 10
      		},
      		totalSize: 0,
		}
	},
	mounted(){
		this.fetchData()
	},
	methods:{
		/**
		* 初始化列表数据
		*/
		fetchData(){
			this.listLoading = true
			getList(this.query).then(res=>{
				this.list = res.data.list
				this.totalSize = res.data.total
				this.listLoading = false
			})
		},

		/**
		* page.pageNum 当前多少页
		* page.pageSize 每页多少条
		*/
    	handlePageChange(page) {
      		this.query.current = page.pageNum;
      		this.query.pageSize = page.pageSize
      		this.fetchData();
    	},	
	}
}
</script>
  1. 问题
    默认显示英文

  2. 解决
    main.js 全局配置

bash 复制代码
import Vue from 'vue'
import ElementUI from 'element-ui'
import VueI18n from "vue-i18n";
import elENLocate from "element-ui/lib/locale/lang/en";
import elCNLocate from "element-ui/lib/locale/lang/zh-CN";
import en from "@/assets/languages/en.json";
import cn from "@/assets/languages/zh.json";

Vue.use(VueI18n)

const localMessages = {
  en: {
    ...en,
    ...elENLocate
  },
  zh: {
    ...cn,
    ...elCNLocate
  }
};

const i18n = new VueI18n({
  locale: 'zh', // 定义默认语言为中文
  silentTranslationWarn: true, // 关闭全部由未翻译关键字造成的警告
  messages: localMessages
});
ElementLocale.i18n((key, value) => i18n.t(key, value));

new Vue({
  el: "#app",
  router,
  i18n,
  components: {
    App
  },
  template: "<App/>"
});
  1. 解决结果

  2. 参考
    element-ui官网

  3. @/assets/languages下的文件
    见 资源

相关推荐
小镇程序员14 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐16 分钟前
前端图像处理(一)
前端
程序猿阿伟23 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒25 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪34 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背37 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js