表格分页——tablePagination
2024-08-27 01:12:14
背景：表格是最为通用的展示方式，为了展示的统一性，以及分页组件的重用，这里写一个分页组件，供比较多或者较少数据2种表格进行分页展示。
分页组件：
<template>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageTotal"/>
</template>
<script>
export default {
props: {
tableBegin: {// 总数据
type: Array,
default () {
return []
}
},
pageSizes: {// 分页条数：数据较多设置为[25,50,100]
type: Array,
default () {
return [10, 20, 30]
}
}
},
data () {
return {
currentPage: 1,
pageSize: 10
}
},
computed: {
pageTotal () { // 分页前总条数
return this.tableBegin.length
}
},
watch: {
tableBegin: {
immediate: true,
handler (val) { // 加载数据
this.currentPage = 1
this.pageSize = this.pageSizes[0] || 10
const begin = (this.currentPage - 1) * this.pageSize
const end = this.currentPage * this.pageSize
const tableData = this.tableBegin.slice(begin, end)
this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
}
}
},
methods: {
// 每页条数
handleSizeChange (val) {
this.pageSize = val
const begin = (this.currentPage - 1) * this.pageSize
const end = this.currentPage * this.pageSize
const tableData = this.tableBegin.slice(begin, end)
this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
},
// 第几页
handleCurrentChange (val) {
this.currentPage = val
const begin = (this.currentPage - 1) * this.pageSize
const end = this.currentPage * this.pageSize
const tableData = this.tableBegin.slice(begin, end)
this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
}
}
}
</script>
使用示例：
import pagination from 'module-comp/tablePagination' <pagination
:table-begin='tableBegin'
@table-pagination-change='getTableData'/>
// 展示数据
getTableData (data, currentPage, pageSize) {
this.tableData = data // 只需要赋值一次，其他情况均有传入的分页的数据回调处理
this.currentPage = currentPage
this.pageSize = pageSize
}
// 删除
deleteRow (index, row) {
this.tableBegin.splice((this.currentPage - 1) * this.pageSize + index, 1)
// this.tableData.splice(index, 1)
}
说明：
加入分页后表格的展示数据均由分页控制，即通过传入的tableBegin监听改变
最新文章
- c# 用户名 密码 访问 局域网共享
- Activemq消息持久化
- 明明已经执行Log.i，偏偏打不出日志
- android 提高进程优先级 拍照永不崩溃（闪退）
- OC中实例变量可见度、setter、getter方法和自定义初始化方法
- Linux搜狗输入法在有道云笔记上输入冗余
- ProgressBar 各种样式
- 避免SWF被内存提取工具提取的方法
- Linux Increase The Maximum Number Of Open Files / File Descriptors (FD)
- SpringMVC12拦截器
- IOS学习：常用第三方库（GDataXMLNode：xml解析库）
- 自己定义控件（2.2）：SurfaceView和SurfaceHolder
- Spring中配置数据源的四种方式
- Python基础数据类型之字典
- sshpass笔记
- Struts 2 之文件上传
- HDU-problem-1002-人类史上最大最好的希望事件-矩阵快速幂
- 关于ehcache缓存中eternal及timeToLiveSeconds和timeToIdleSeconds的说明
- 认识LDAP协议
- elasticSearch新认知