溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關如何封裝一個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+iview的分頁組件了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
