vue+iview的分页组件封装
1.在components中创建pagination文件夹，接着创建src，index.js,index.less文件
2.index.less文件
|
1
2
3
4
5
6
7
8
|
//需要修改的样式
.ivu-page-options {
margin-left: 10px;
.ivu-page-options-sizer {
margin-right: 0;
}
}
|
3.index.js文件
|
1
2
3
4
5
6
7
8
9
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<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，用于全局引入
|
1
2
3
4
|
import GlobalPage from "@/components/pagination/index.js";
export default (Vue) => {
Vue.component("GlobalPage ", GlobalPage );
}
|
6然后在全局的main.js引入，可全局使用
|
1
2
|
import components from "@/components/index.js";
Vue.use(components)
|
7.组件的使用
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<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>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/wjswangjinsheng/article/details/109206823