Encapsulation of vue+iview Paging Component
- 2021-09-20 19:33:35
- OfStack
vue+iview Paging Component Encapsulation
1. Create the pagination folder in components, then create the src, index. js, index. less files
2. index. less file
// Styles that need to be modified
.ivu-page-options {
margin-left: 10px;
.ivu-page-options-sizer {
margin-right: 0;
}
}
3. index. js file
import "./index.less";
import component from "./src/main";
/* istanbul ignore next */
component.install = function (Vue) {
Vue.component(component.name, component);
};
export default component;
4. main. vue in the src folder
<template>
<!-- Paging component -->
<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: {
// Total data
type: [String, Number],
default: 0
},
page: {
// Current paging
type: [String, Number],
default: 1
},
rows: {
// How many articles are displayed per page
type: [String, Number],
default: 10
},
disabled: {
type: Boolean,
default: false
},
sizer: {
// Whether to display drop-down components
type: Boolean,
default: false
},
elevator: {
// Whether to display jump input box
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: {
// Paging change
currentChange (current) {
this.params.page = current;
this.onChange();
},
// Change in the number of pieces displayed per page
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();
// Restore current page number
// this.$refs.page.currentPage = 1;
}
}
}
</script>
5. Create index. js in components for global import
import GlobalPage from "@/components/pagination/index.js";
export default (Vue) => {
Vue.component("GlobalPage ", GlobalPage );
}
6 then introduced in the global main. js, which can be used globally
import components from "@/components/index.js";
Vue.use(components)
7. Use of components
<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, // Total data
queryForm : {} ,
formData : {
page: 1,
rows: 10,
}
}
},
methods: {
// Paging switch
pageChange (params) {
this.queryForm.page = params.page
this.queryForm.rows = params.rows
// Method of querying data
this.search(this.queryForm)
},
}
}
</script>
For the vue. js component tutorial, please click on the topic vue. js component learning tutorial to learn.