溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何封裝一個(gè)vue+iview的分頁組件

發(fā)布時(shí)間：2020-11-18 15:54:44 來源：億速云 閱讀：470 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何封裝一個(gè)vue+iview的分頁組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

vue+iview的分頁組件封裝

1.在components中創(chuàng)建pagination文件夾，接著創(chuàng)建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: {
  // 數(shù)據(jù)總數(shù)
  type: [String, Number],
  default: 0
 },
 page: {
  // 當(dāng)前分頁
  type: [String, Number],
  default: 1
 },
 rows: {
  // 每頁顯示多少條
  type: [String, Number],
  default: 10
 },
 disabled: {
  type: Boolean,
  default: false
 },
 sizer: {
  // 是否顯示下拉組件
  type: Boolean,
  default: false
 },
 elevator: {
  // 是否顯示跳轉(zhuǎn)輸入框
  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();
 },
 // 每頁顯示條數(shù)改變
 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();
  // 當(dāng)前頁碼還原
  // this.$refs.page.currentPage = 1;
 }
 }
}
</script>

5.在components中創(chuàng)建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, // 數(shù)據(jù)總數(shù)
  queryForm：{}，
  formData： {
   page: 1,
   rows: 10,
  }
  }
 },
 methods: {
  // 分頁切換
 pageChange (params) {
  this.queryForm.page = params.page
  this.queryForm.rows = params.rows
  //查詢數(shù)據(jù)的方法
  this.search(this.queryForm)
 },
 }
}

</script>

上述就是小編為大家分享的如何封裝一個(gè)vue+iview的分頁組件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手