• 注册
    • 查看作者
    • vue+iview分页组件的封装

       

      这篇文章主要为大家详细介绍了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>

      关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

      以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

      来源:脚本之家

      链接:https://www.jb51.net/article/199919.htm

      ,。,!

    • 0
    • 0
    • 0
    • 1
    • 请登录之后再进行评论

      登录
    • 单栏布局 侧栏位置: