基于elementui封装一个页脚插件

最新推荐文章于 2024-05-23 21:01:52 发布

aflylong

最新推荐文章于 2024-05-23 21:01:52 发布

阅读量176

点赞数

分类专栏： javascript 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/aflylong/article/details/128776037

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在components中新建一个A-pagination.vue文件
文件代码

<template>
  <el-pagination
    class="pagination_bottom"
    background
    :current-page="pageData.page"
    :page-sizes="pageSizes"
    :page-size="pageData.pagesize"
    :layout="layout"
    :total="pageData.total"
    @current-change="(e) => changePageData('page', e)"
    @size-change="(e) => changePageData('pagesize', e)"
  />
</template>

<script>
export default {
  model: {
    prop: "pageData",
    event: "change",
  },
  props: {
    pageData: Object,
    pageSizes: {
      type: Array,
      default: () => [20, 50, 100, 200, 300, 400],
    },
    layout: {
      type: String,
      default: () => "total, sizes, prev, pager, next",
    },
  },
  methods: {
    changePageData(item, val) {
      let newDate = { ...this.pageData };
      newDate[item] = val;
      this.$emit("change", newDate);
    },
  },
};
</script>

<style lang="less" scoped>
.pagination_bottom /deep/ .el-input__inner {
  height: 28px;
  line-height: 28px;
}

.pagination_bottom /deep/ .el-input__inner {
  height: 28px;
  line-height: 28px;
}

.pagination_bottom {
  position: unset;
  padding: unset;
  width: auto;
  /deep/ span:not([class*="suffix"]) {
    font-size: 12px;
    color: #999;
  }
  /deep/ .el-pager li:not(.disabled).active {
    border: 1px solid #409eff;
  }
  /deep/ .btn-prev,
  /deep/ .el-pager li,
  /deep/ .btn-next {
    line-height: 26px;
    background: #fff;
    border: 1px solid #e0e6eb;
    border-radius: 2px;
    color: #999;
    font-size: 11px;
  }
  /deep/ .el-pager li:hover,
  /deep/ .btn-prev:hover,
  /deep/ .btn-next:hover {
    border: 1px solid #409eff;
    color: #409eff;
  }
  /deep/ .btn-prev:disabled,
  /deep/ .btn-next:disabled {
    color: #9ba3af;
    background: #f7faf8;
  }
  /deep/ .btn-prev:disabled:hover,
  /deep/ .btn-next:disabled:hover {
    color: #999;
    border: 1px solid #e0e6eb;
  }
  /deep/ .el-select .el-input .el-input__inner {
    border: 1px solid #e7e7e7;
    font-size: 12px;
    color: #999;
  }
}
</style>

挂载全局

import Zpagination from "@/components/A-pagination.vue";

export function loadAllComponents(Vue) {
  Vue.component("A-pagination", Zpagination);
}

main.js中引入

import { loadAllComponents } from "@/components/index.js";
loadAllComponents(Vue);

页面上使用

 <A-pagination v-model="pageData" @change="(e) => esarchang()" />
  
 data(){
 	return {
       pageData: {
        total: 0,
        pagesize: 20,
        page: 1,
       },
	}
 }
 
 methods: {
 	esarchang(){
 		console.log(this.pageData)
    }
 }