介绍//需要修改的样式
.ivu-page-options {
margin-left: 10 px;
.ivu-page-options-sizer {
margin-right: 0;
}
} & lt; template>
& lt; !——分页组件——比;
& lt;页面
类=皊aas-pagination"
ref=皃age"
:加载=發oading"
:禁用=癲isabled"
:总=皌otal"
:show-sizer=皊izer"
:show-elevator=癳levator"
:当前=皃arams.page"
:页面大?皃arams.rows"
:page-size-opts=皊izeOpts"
@on-change=癱urrentChange"
@on-page-size-change=皃ageChange"/比;
& lt;/template>
& lt; script>
出口默认{
道具:{
加载:{
类型:布尔,
默认值:假
},
总:{//数据总数
类型:字符串、数字,
默认值:0
},
页面:{//当前分页
类型:字符串、数字,
默认值:1
},
行:{//每页显示多少条
类型:字符串、数字,
默认值:10
},
禁用:{
类型:布尔,
默认值:假
},
筛选器:{//是否显示下拉组件
类型:布尔,
默认值:假
},
电梯:{//是否显示跳转输入框
类型:布尔,
默认值:假
}
},
看:{
页面(){
this.params。页面=;
},
行(){
this.params。行=;
}
},
数据(){
返回{
sizeOpts:(10年,20年,30、40、50、60、70、80、90、100],
参数:{
页:1、
行:10
}
}
},
方法:{//分页改变
currentChange(当前){
this.params。页面=当前;
this.onChange ();
},//每页显示条数改变
pageChange(行){
this.params。页面=1;
this.params。行=行;
this.onChange ();
},>从“进口GlobalPage @//分页/index.js"组件;
出口违约(Vue)=比;{
Vue.component (“GlobalPage“, GlobalPage);
} & lt; template>
& lt; div>
& lt;全局页
ref=皃agination"
:筛选器=皌rue"
:页面=癴ormData.page"
:行=癴ormData.rows"
:总=皌otal"
@on-change=皃ageChange"比;
& lt;/global-page>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
总:0,//数据总数
queryForm: {},
formData: {
页:1、
行:10,
}
}
},
方法:{//分页切换
pageChange (params) {
this.queryForm。页面=params.page
this.queryForm。行=params.rows//查询数据的方法
this.search (this.queryForm)
},
}
}
& lt;/script>
这期内容当中小编将会给大家带来有关如何封装一个vue + iview的分页组件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
vue + iview的分页组件封装
1。在组件中创建分页文件夹,接着创建src, index.js, index.less文件
2.指数。少文件
3.指数。js文件
导入“。/index.less";
从“进口组件。/src/main";
下*//*伊斯坦布尔忽略
组件。安装=function (Vue) {
Vue.component (component.name、组件);
};
出口默认组件; 4. src文件夹中主要的。vue
6然后在全局的主要。js引入,可全局使用
导入组件从“@/组件/index.js"; Vue.use(组件)
7。组件的使用
上述就是小编为大家分享的如何封装一个vue + iview的分页组件了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
