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

相关推荐
uncleTom6663 分钟前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey5 分钟前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆13 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W18 分钟前
uniapp全局状态管理实现方案
前端
Vertira19 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL1 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
用户7579419949701 小时前
Vue响应式原理推导过程
vue.js·响应式设计
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript