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

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer085 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test6 小时前
js下载excel示例demo
前端·javascript·excel
Yaml46 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理