vue+iview 封装分页组件

vue+iview的分页组件封装

1.在components中创建pagination文件夹，接着创建src，index.js,index.less文件
2.index.less文件

  //需要修改的样式
  .ivu-page-options {
    margin-left: 10px;

    .ivu-page-options-sizer {
      margin-right: 0;
    }
  }

3.index.js文件

import "./index.less";
import component from "./src/main";

/* istanbul ignore next */
component.install = function (Vue) {
  Vue.component(component.name, component);
};

export default component;

4.src文件夹中的main.vue

<template>
  <!-- 分页组件 -->
  <Page
    class="saas-pagination"
    ref="page"
    :loading="loading"
    :disabled="disabled"
    :total="total"
    :show-sizer="sizer"
    :show-elevator="elevator"
    :current="params.page"
    :page-size="params.rows"
    :page-size-opts="sizeOpts"
    @on-change="currentChange"
    @on-page-size-change="pageChange"/>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    total: {
      // 数据总数
      type: [String, Number],
      default: 0
    },
    page: {
      // 当前分页
      type: [String, Number],
      default: 1
    },
    rows: {
      // 每页显示多少条
      type: [String, Number],
      default: 10
    },
    disabled: {
      type: Boolean,
      default: false
    },
    sizer: {
      // 是否显示下拉组件
      type: Boolean,
      default: false
    },
    elevator: {
      // 是否显示跳转输入框
      type: Boolean,
      default: false
    }
  },
  watch: {
    page (to) {
      this.params.page = to;
    },

    rows (to) {
      this.params.rows = to;
    }
  },
  data () {
    return {
      sizeOpts: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
      params: {
        page: 1,
        rows: 10
      }
    }
  },
  methods: {
    // 分页改变
    currentChange (current) {
      this.params.page = current;
      this.onChange();
    },
    // 每页显示条数改变
    pageChange (rows) {
      this.params.page = 1;
      this.params.rows = rows;
      this.onChange();
    },

    onChange () {
      this.$emit("on-change", JSON.parse(JSON.stringify(this.params)));
    },

    reset () {
      this.params = {
        page: 1,
        rows: 10
      }
      this.onChange();
      // 当前页码还原
      // this.$refs.page.currentPage = 1;
    }
  }
}
</script>

5.在components中创建index.js，用于全局引入

import GlobalPage from "@/components/pagination/index.js";
export default (Vue) => {
    Vue.component("GlobalPage ", GlobalPage );
}

6然后在全局的main.js引入，可全局使用

import components from "@/components/index.js";
Vue.use(components)

7.组件的使用

<template>
  <div>
      <global-page 
        ref="pagination"
        :sizer="true"
        :page="formData.page"
        :rows="formData.rows"
        :total="total"
        @on-change="pageChange">
      </global-page>
  </div>
</template>
<script>
export default {
  data(){
   return {
       total: 0, // 数据总数
       queryForm：{}，
       formData： {
          page: 1,
          rows: 10,
        }
     }
  },
   methods: {
      // 分页切换
    pageChange (params) {
      this.queryForm.page = params.page
      this.queryForm.rows = params.rows
      //查询数据的方法
      this.search(this.queryForm)
    },
  }
}

</script>