一个监控控制台界面,有成千上万条表格数据,需要做一个全局分页组件,支持调整每页显示数目,总页数,当前页数,前进后退,自由跳转页数。
参数名
数据类型
说明
总计
数量
总条数
pageNo
数量
总页数
限制
数量
每页展示条数
预期长酱紫(不要嫌丑!毕竟是后台控制台!)
代码
html
& lt; template>
& lt; div class=" paging-content clearfix”比;
& lt; div类=癴l”比;
总共& lt; b>{{总}}& lt;/b>条,,
& lt;选择v模型=跋拗啤北?
& lt; option> 10 & lt;/option>
& lt; option> 20 & lt;/option>
& lt; option> 30 & lt;/option>
& lt; option> 40 & lt;/option>
& lt; option> 50 & lt;/option>
& lt; option> 100 & lt;/option>
& lt;/select>条/页
& lt;/div>
& lt; div类=癴r paging-box”比;
& lt; v=" + no> 1”类=癴a fa-angle-double-left @click”=癵oToPage(1)“祝辞& lt;/a>
& lt; v=? no<=1”类=癴a fa-angle-double-left祝辞& lt;/a>
& lt; v=" + no> 1”类=癴a fa-angle-left @click”=癵oToPage(+ - 1)”祝辞& lt;/a>
& lt; v=? no<=1”类=癴a fa-angle-left祝辞& lt;/a>
& lt; v=" + no-2> 1 "在……& lt;/a>
& lt; v=" + no-2> 0”@click=癵oToPage(+ 2号)“在{{+没有- 2}}& lt;/a>
& lt; v=" + no-1> 0”@click=癵oToPage(+ 1号)“在{{+没有- 1}}& lt;/a>
& lt; v=" + no> 0”在{{没有}}& lt;/a>
& lt; v=" +不+ 1 & lt;=+金额”@click=癵oToPage(+不+ 1)”在{{+不+ 1}}& lt;/a>
& lt; v=" +不+ 2 & lt;=+金额”@click=癵oToPage(+不+ 2)”在{{+不+ 2}}& lt;/a>
& lt; v=" +不+ 2 & lt;=+ 1”祝辞…& lt;/a>
& lt; v=" + no<+金额”类=癴a fa-angle-right @click”=癵oToPage(+不+ 1)”祝辞& lt;/a>
& lt; v=" + no>=+金额”类=癴a fa-angle-right祝辞& lt;/a>
& lt; v=" + no<+金额”类=癴a fa-angle-double-right @click”=癵oToPage(+)和“祝辞& lt;/a>
& lt; v=" + no>=+金额”类=癴a fa-angle-double-right祝辞& lt;/a>
& lt;/div>
& lt;/div>
& lt;/template>
之前
js
& lt; script>
模块。出口={
道具:[“不”、“限制”、“总”),
计算:{
总结:函数(){
返回Math.ceil (this.total/this.limit);
}
},
方法:{
“goToPage”:函数(page_no) {
这一点。美元分派(页面切换,page_no);
}
},
看:{
“限制”:函数(newVal oldVal) {
如果(newVal !=oldVal&, oldVal !=未定义){
这一点。美元分派(page-limit-change, newVal);
}
}
}
}
& lt;/script>
之前
css
& lt;风格lang="少" rel=把奖?少”比;//定义了一个颜色参数文件,方便自定义颜色和管理,比如@color-white: # fff;
@ import“. .//变量”;
.paging-content {
比;div {
字体大小:12 px;
颜色:@color-text-normal;
}
选择{
margin-right: 4 px;
}
.fl {
浮:左;
}
。fr {
浮:正确;
}
.paging-box {
border-top: 1 px固体# ccc;
边界底部:1 px固体# ccc;
border-left: 1 px固体# ccc;
一个{
显示:inline-block;
宽度:24 px;
高度:24 px;
边境:1 px固体# ccc;
行高:24 px;
text-align:中心;
浮:左;
颜色:@color-text-blue;
光标:指针;
}
}
}
& lt;/style>
之前
引入
从示例页面的导入页面
注册组件
组件:{
页面:
},
之前
模板
& lt;分页:no.sync="参数。page_no”: limit.sync="参数。page_limit”: total.sync=" total_items "祝辞& lt;/paging>
以上是制作步骤,制作好组件以后,参考Vue官网插件发布
<李>确保你的项目的根目录的package.json文件已经建好李
<李>登录npm官网注册李
<李>在你的项目目录下登录npm登录(之后按提示填写信息)
