【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下的文件
    见 资源

相关推荐
Nan_Shu_6147 小时前
Web前端面试题(2)
前端
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光9 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军9 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5209 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy9 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20509 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端9 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿9 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js