Vue全局分页组件的实现代码

需求

一个监控控制台界面，有成千上万条表格数据，需要做一个全局分页组件，支持调整每页显示数目、总页数、当前页数、前进后退、自由跳转页数。

字段

参数名数据类型说明总数总条数页码总页数数量限制每页展示条数原型

预期长酱紫（不要嫌丑！毕竟是后台控制台！)

代码

超文本标记语言

模板div class='分页-内容清除修复' div class=' fl '总共{ {总计}}条选择v型="极限"选项10/选项20/选项30/选项40/选项50/选项100/选项/选择条/页/div div class=' fr paging-box ' a v-if=' no1 ' class=' fa fa-angle-double-left ' @ click=' goToPage(1)'/a a v-if=' no=1 ' class=' fa fa fa fa-angle-double-left '/a v-if=' no1 ' class=' fa fa-angle-left ' @ click=' goToPage(no-1)'/a v-if=' no=1 ' class=' fa fa fa fa-angle-left '/a a a a./a a v-if=' no-20 ' @ click=' GoToPage(no-2)' { { no-2 } }/a a v-if=' no-10 ' @ click=' GoToPage(no-1)' { { no-1 } }/a v-if=' no 0 ' style=' color : # 000；背景# eee ' { no } }/a a v-if=' no 1=sum ' @ click=' goToPage(no 1)' { { no 1 } }/a a a v-if=' no 2=sum ' @ click=' goToPage(no 2)' { { no 2 } }/a a v-if=' no 2=sum-1 './a a v-if=' no sum ' class=' fa fa-angle-right ' @ click=' GoTopage(no。1)'/a a v-if=' no=sum ' class=' fa fa-angle-right '/a v-if=' no sum ' class=' fa-angle-double-right '/a/div/div/template js

脚本模块。export={ prop s 3360[' no '，' limit '，' total']，computed : { sum 3360 function(){ return math。天花板(这个。总计/本。极限)；} }，methods: { 'goToPage':函数(页码){这个.$dispatch('page-change '，page _ no)；} }，watch: { 'limit':函数(纽瓦尔，旧瓦尔){ if(纽瓦尔！=oldValoldVal！=未定义){这个.$dispatch('page-limit-change '，NewVal)；} } } }/scriptcss

style lang='less' rel='样式表/less' //定义了一个颜色参数文件，方便自定义颜色和管理，比如@ color-white : # fff；@导入./less/variables '；分页-内容{ div { font-size : 12pxcolor : @ color-text-正常；}选择{右边距： 4px} .fl { float:左侧；} .fr { float:右侧；} .分页盒{边框-顶部： 1px实心# CCC边框-底部： 1px实心# ccc边框-左侧： 1px实心# ccc{ display:内联块；宽度： 24px高度： 24px边框-右侧： 1px实心# ccc线高： 24px文本对齐：中心；向左浮动：颜色： @ color-text-blue；光标：指针；} } }/样式局部组件使用方法

引入

从"示例-页面"导入页面注册组件

组件：{ page: page}，模板

分页：号。sync=' params。page _ no ' :限制。sync=' params。page _ limit '总计：sync=' total _ items '/分页以上是制作步骤，制作好组件以后，参考某视频剪辑软件官网插件发布

新公共管理发包

确保你的项目的根目录的package.json文件已经建好登录新公共管理官网注册在你的项目目录下登录新公共管理登录（之后按提示填写信息)发包新公共管理发布如果执行新公共管理发布出现错误，可能是你的包名已经被注册过，在新公共管理官网上搜索一下是否已被注册了。若发包成功，你就可以在新公共管理官网上搜索到自己的包。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。