vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧。
这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage。不了解Vue.js的童鞋可以移步我的上一篇文章《浅谈Vue.js》了解一下。
BootPage组件简介
其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能,我便在这里分享一下,大家自觉填坑咯。
BootPage是一款支持静态数据和服务器数据的表格分页组件,支持调整每页显示行数和页码显示个数,样式基于bootstrap,就像这样:
使用方法
在.vue的组件文件中我们这样写template,即html代码:
idnamecontentremark
刷新
标签中async指是否从服务器端获取数据,false为否;data为静态的表格数据数组;lens为每页显示行数的数组;page-len为可显示的页码数;
使用静态数据的javascript代码即script标签内的内容如下:
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
lists: [
{num: 1, author: 'luozh', contents: 'BootPage是一款支持静态数据和服务器数据的表格分页组件', remark: 'dsds'},
{num: 2, author: 'luozh', contents: '支持调整每页显示行数和页码显示个数,样式基于bootstrap', remark: 'dsds'},
{num: 3, author: 'luozh', contents: '标签中async指是否从服务器端获取数据,false为否', remark: 'dsds'},
{num: 4, author: 'luozh', contents: 'data为静态的表格数据数组;', remark: 'dsds'},
{num: 5, author: 'luozh', contents: 'lens为每页显示行数的数组', remark: 'dsds'},
{num: 6, author: 'luozh', contents: 'page-len为可显示的页码数', remark: 'dsds'},
{num: 7, author: 'luozh', contents: '服务器回传参数为{data:[], page_num: 6}, 其中data为表格数据,page_num为总页数', remark: 'dsds'},
{num: 8, author: 'luozh', contents: '可以调用this.$refs.page.refresh()刷新表格数据', remark: 'dsds'}
], // 表格原始数据,使用服务器数据时无需使用
tableList: [] // 分页组件传回的分页后数据
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据
'data' (data) {
this.tableList = data
}
}
}
一般我们很少使用静态的表格数据,大多数应用的数据都是从服务器端获取的,所以这里提供了获取服务器分页数据的方法:
使用服务器数据的组件HTML如下:
其中url为服务器的请求地址;param为需要向服务器发送的参数对象;
使用服务器数据javascript的代码如下:
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
url: '/bootpage/', // 请求路径
param: {}, // 向服务器传递参数
tableList: [] // 分页组件传回的分页后数据
}
},
methods: {
refresh () {
this.$refs.page.refresh() // 这里提供了一个表格刷新功能
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据(这里即为服务器传回的数据)
'data' (data) {
this.tableList = data
},
// 刷新数据
'refresh' () {
this.refresh()
}
}
}
注:服务器除了传给组件表格的数组内容,还需一个总页数的键名,名为page_num
组件自带向服务器传递的参数为:
{
active: 1, // 当前页码
length: 5 // 每页显示个数
}
服务器回传的参数需为:
{
data: [], // 表格数据
page_num: 5 // 总页数
}
组件源码
至于分页的实现源码这里的就不展示了,所有源码我都上传到了我的github,地址为:https://github.com/luozhihao/...
这里事先提个醒:因为这个组件是我用几个小时赶出来的,所以对于Vue组件的编写格式和规范肯定是考虑不周的,没有完全独立出来,所以自觉填坑咯,这里只作分享。
当然你也可以随意的修改组件的代码来适合自己项目的使用,毕竟实现大而全的分页组件还是比较复杂的。
收工,欢迎评论指正。
vue php 分页组件,基于Vue.js的表格分页组件相关推荐
- 基于Vue.js的表格分页组件
转载自 基于Vue.js的表格分页组件 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
- 基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
- 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
- vue横向树结构_基于vue.js实现树形表格的封装
基于vue.js实现树形表格的封装(vue-tree-table) 前言由于公司产品(基于vue.js)需要,要实现一个树形表格的功能,百度.google找了一通,并没有发现很靠谱的,也不是很灵活.所 ...
- vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿 关注我们,一起学习进步 基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
- vue开发案例:基于Three.js搭建三维数字化场景
0.场景涉及的关键技术点 GLTFLoader加载gltf模型,并解析模型动画: 基于worker-loader在vue中使用web worker: 基于web worker动态设置模型(鸟.牛)的移 ...
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录. 官网定义:Element,一套为开发者.设计师和产品经理 ...
- vue族谱架构_基于 Vue 实现动态家谱图/组织结构图
Vue-Tree-Chart 最近一个项目里有个前端绘制家谱图的需求,大概是下面这个样子: 点击节点会弹出操作菜单,实现增删改查等操作,查阅网上资料发现,现有案例基本都是基于orgchart这个jQu ...
- vue部门结构图_基于 Vue 实现动态组织结构图
基于 Vue 实现动态组织结构图 最近一个项目里有个前端绘制家谱图的需求, 大概是下面这个样子: 点击节点会弹出操作菜单, 实现增删改查等操作, 查阅网上资料发现, 现有案例基本都是基于 orgcha ...
最新文章
- linux下装jdk以及failed /usr/local/jdk1.6.0_10/jre/lib/i386/client/libjvm.so,
- JavaFX技巧8:美丽深层
- hdu-1728(贪心bfs的灵活运用吧)
- 书摘:35岁之前成功的12条黄金法则
- eslint vscode 自动格式化_使用 VSCode 的必备三大神器,这才是开发 Vue 的真香解决方案...
- java perl5compiler_用java取得電腦IP﹑電腦名稱以及網卡地址的方法
- 女生做程序员压力大吗?
- MySql BlackHole存储引擎
- 获取CPUID序列号的两种办法
- 数字逻辑电路中逻辑门的符号_数字计算机中使用的逻辑门
- 通赢A5管理系统服务器连不进,赢通软件A5A6系列管理系统参数设置说明
- 国学传承美德,走进一德大脑屋国学启蒙课
- 常见问题之Golang——verifying github.com/go-playground/assert/v2@v2.0.1/go.mod: checksum mismatch错误...
- APM, EAM, AIP都是什么鬼?
- Android 启动过程介绍
- 关于vivo手机拍照后无法跳转裁剪
- 车管所免检测审车流程
- IPD的决策评审DCP(1):概念、战略性
- Python 打开文件对话框
- 基于S12ZVM的无感FOC失步检测