add: 新增分页功能组件，通过 pagerOpt 配置

pages/index/index.vue

@@ -2,11 +2,12 @@
 	<view class="table-container">
 		<n-table
 			:headerOpt="headerOpt"
-			:nameOpt="{isShow:true, title: '基础表格+固定高度', needMenu: true, align: 'center'}"
-			:tableOpt="{}"
-			:tableHeight="400"
+			:nameOpt="{isShow:true, title: '基础表格+不固定高度+分页组件', needMenu: true, align: 'center'}"
+			:tableOpt="{isShowSum:true}"
+			:tableHeight="0"
 			:tableData="tableData"
 			:columns="columns"
+			:pagerOpt="{show:true,pageSize: 4}"
 			colKey="dataIndex"
 			idKey="key"
 			@clickMenu="onClickMenu"

uni_modules/n-table/changelog.md

+## 1.0.3（2022-04-01）
+1. fix: 修复 headerOpt -> color 不生效 [2022年4月1日]
+2. 新增分页功能，详细请看文档相关配置 [2022年4月1日]
+
 ## 1.0.2（2022-04-01）
 1. add: 新增 columns 配置： customName , 别名；如果 customName 存在 则优先显示，否则显示 title
 2. fix: 修复表格名称居中显示实际没有居中的问题

uni_modules/n-table/components/n-table/config.js

@@ -53,3 +53,11 @@ export const defaultTableOpt = {
 	// sumPlace String | 合计行位置 top / bottom, 仅 isShowSum = true 生效
 	sumPlace: 'bottom'
 }
+
+
+export const defaultPagerOpt = {
+	// show Boolean | 是否启用分页功能
+	show: false,
+	// pageSize Number | 每页条数
+	pageSize: 10
+}
\ No newline at end of file

uni_modules/n-table/components/n-table/n-table.vue

@@ -43,6 +43,7 @@
 				<view v-html="showLoading ? '' : _tableOpt.emptyText"></view>
 			</view>
 		</view>
+		<pager v-if="_pagerOpt.show" :curPage="curPage" :totalPage="totalPage" @nextPage="nextPage" @prevPage="prevPage"></pager>
 	</view>
 </template>
 
@@ -51,20 +52,23 @@
 	import tableHeader from "./table-header.vue"
 	import tableBody from "./table-body.vue"
 	import tableName from "./table-name.vue"
-	import { defaultTableOpt, defaultNameOpt } from "./config.js"
+	import pager from "./pager.vue"
+	import { defaultTableOpt, defaultNameOpt, defaultPagerOpt } from "./config.js"
 	import { sortList } from "./utils.js"
 	export default {
-		components: { tableHeader, tableBody, tableName },
+		components: { tableHeader, tableBody, tableName, pager },
 		data() {
 			return {
 				nowSortKey: '',
 				sortType: 'desc', // asc/desc 升序/降序
-
 				tableLoaded: false,
-				dataList: [], // 处理后的数据列表
+				dataList: [], // 遍历显示的数据列表
+				saveDataList: [], // 处理后的数据列表 - 用以备份 ： 当分页形式无需重新计算
 				dataIndexs: [], // 
 				isTree: false, // 是否树形数据
 				isOpenAll: false, // 是否展开全部
+				curPage: 1, // 当前页码
+				totalPage: 0, // 总页数
 			}
 		},
 		props: {
@@ -85,6 +89,13 @@
 				type: Object,
 				default: () => {}
 			},
+			// 分页配置
+			pagerOpt: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
 			// 数据源唯一key字段名
 			idKey: { type: String, default: 'id' },
 			// columns中对应列表数据的 字段名
@@ -93,11 +104,6 @@
 			tableData: { type: [Array, Boolean], default () { return false } },
 
 			columns: {
-				/*
-				 *
-				 * [{title: xxx, key: 当前列展示对象名, width: 列宽, render: <template>}]
-				 *
-				 * */
 				type: [Array, Boolean],
 				required: true
 			},
@@ -113,17 +119,25 @@
 				return this.tableHeight ? 'height: ' + uni.upx2px(this.tableHeight) + 'px' : ''
 			},
 
+			// 实际表格内容高度(表头+ 表格)
 			compluteTableHeight() {
 				let nameHeight = this._nameOpt.isShow ? 64 : 0
-				return this.tableHeight ? 'height: ' + uni.upx2px(this.tableHeight - nameHeight) + 'px' : ''
+				let pageHeight = 64
+				return this.tableHeight ? 'height: ' + uni.upx2px(this.tableHeight - nameHeight - pageHeight) + 'px' : ''
 			},
 
+			// 默认表格配置
 			_tableOpt() {
 				return Object.assign({ ...defaultTableOpt }, this.tableOpt)
 			},
 
+			// 默认表格名称配置
 			_nameOpt() {
 				return Object.assign({ ...defaultNameOpt }, this.nameOpt)
+			},
+			
+			_pagerOpt(){
+				return Object.assign({...defaultPagerOpt }, this.pagerOpt)
 			}
 		},
 
@@ -142,6 +156,15 @@
 			}
 		},
 		methods: {
+			nextPage() {
+				this.curPage++
+				this.fmtDataList(this.saveDataList)
+			},
+			prevPage() {
+				this.curPage--
+				this.fmtDataList(this.saveDataList)
+			},
+
 			// 排序
 			onRowSort(option) {
 				this.sort(option.sortKey)
@@ -159,7 +182,6 @@
 			columnsDeal(list, level = 0) {
 				list.forEach(item => {
 					let { children, ...res } = item
-					// if (res[this.colKey]) 
 					if (children && children.length) {
 						this.columnsDeal(children, level + 1)
 					} else {
@@ -171,15 +193,36 @@
 			// 处理数据列表
 			fmtDataList(list) {
 				this.isTree = false
-				if (!list || !list.length) return this.dataList = []
-				let _list = this.listFmt(list, 0)
-				this.dataList = _list
+				if (!list || !list.length) {
+					this.saveDataList = []
+					this.dataList = []
+					return
+				}
+				
+				// 保留一份完整数据
+				this.saveDataList = list
+				let dataList 
+				if (this._pagerOpt.show) {
+					// 分页
+					this.totalPage = Math.ceil(list.length / this._pagerOpt.pageSize)
+					dataList = this.getPagerList(list)
+				} else {
+					// 不分页
+					dataList = list
+				}
+				this.dataList = this.listFmt(dataList, 0)
 				// 计算总计行
 				if (this._tableOpt.isShowSum) {
 					this.setSumRow()
 				}
 			},
 
+			getPagerList(list) {
+				let curPage = this.curPage
+				let pageSzie = this._tableOpt.isShowSum ? this._pagerOpt.pageSize - 1 : this._pagerOpt.pageSize
+				return list.slice((curPage - 1) * pageSzie, curPage * pageSzie)
+			},
+
 			// 设置总计行
 			setSumRow() {
 				let sumItem = {
@@ -243,14 +286,14 @@
 				let key = row[this.colKey]
 				let sum = '-'
 				if (noSum) return sum
-				if (this.tableData) {
+				if (this.dataList) {
 					if (
-						this.tableData.every(item => {
+						this.dataList.every(item => {
 							return !Number.isNaN(item[key] - 0)
 						})
 					) {
 						sum = 0
-						this.tableData.map((item, index) => {
+						this.dataList.map((item, index) => {
 							if (!key && index != 0) {
 								sum = '-'
 							} else {

uni_modules/n-table/components/n-table/pager.vue

+<template>
+	<view class="pager-wrap border-top" v-if="totalPage > 0">
+		<view class="pager-prev pager-btn border" :class="{disabled: curPage <= 1}" @click="onPrevPage">
+			上一页
+		</view>
+		<view class="pager-num" >
+			<text class="cur-num"> {{curPage}} </text>
+			<text> / </text>
+			<text class="total-num"> {{totalPage}} </text>
+		</view>
+		<view class="pager-next pager-btn border" :class="{disabled: curPage >= totalPage}" @click="onNextPage">
+			下一页
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'pager',
+		props: {
+			curPage: {
+				type: Number,
+				default: 1
+			},
+			totalPage: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			onPrevPage() {
+				if (this.curPage <= 1) return
+				this.$emit('prevPage')
+			},
+			onNextPage() {
+				if(this.curPage >= this.totalPage) return
+				this.$emit('nextPage')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.pager-wrap {
+		height: 64rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0rpx 20rpx;
+		z-index: 112;
+	}
+
+	.pager-btn {
+		// padding: 10rpx 20rpx;
+		background-color: #f8f8f8;
+		padding: 5rpx 10rpx;
+		font-size: 26rpx;
+		border-radius: 3px;
+		// border: .5rpx solid #999999;
+		color: #19191b;
+	}
+
+	.pager-btn.disabled {
+		opacity: .6;
+	}
+
+	.border-top {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			width: 200%;
+			height: 1rpx;
+			transform-origin: left top;
+			transform: scale(.5);
+			left: 0;
+			top: 0;
+			background-color: #c0c4cc;
+		}
+	}
+
+	.border {
+		position: relative;
+
+		&::after {
+			border-radius: 3px;
+			content: '';
+			position: absolute;
+			width: 200%;
+			height: 200%;
+			transform-origin: left top;
+			transform: scale(.5);
+			left: 0;
+			top: 0;
+			border: 1rpx solid #c0c4cc;
+			pointer-events: none;
+		}
+	}
+</style>

uni_modules/n-table/components/n-table/table-body.vue

@@ -81,7 +81,7 @@
 			dataIndexs: { type: Array, default: () => [] },
 			stickSide: { type: Boolean, default: false },
 			textAlign: { type: String, default: 'center' },
-			fontSize: { type: Number, default: 24},
+			fontSize: { type: Number || String, default: 24},
 			color: {type: String, default: '#333'},
 			// 是否展开全部
 			isOpenAll: { type: Boolean, default: false },

uni_modules/n-table/components/n-table/table-header.vue

@@ -11,6 +11,8 @@
 				:height="headerOpt.height"
 				:fontSize="headerOpt.fontSize"
 				:titleTextAlign="headerOpt.align"
+				:textColor="headerOpt.color"
+				:bg="headerOpt.bg"
 				:nowSortKey="nowSortKey"
 				:sortType="sortType"
 				@sort="onSort"

uni_modules/n-table/components/n-table/table-name.vue

@@ -57,7 +57,7 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		padding-right: 40rpx;
+		// padding-right: 40rpx;
 	}
 
 	.name-opt {

uni_modules/n-table/components/n-table/title-column.vue

@@ -12,7 +12,7 @@
 					height:itemStyle.height,
 					lineHeight:itemStyle.lineHeight,
 					fontSize: itemStyle.fontSize,
-					color:item.color || '#333'
+					color:item.color || textColor || '#333'
 					}">
 
 				<!-- 树形结构 统一展开、收起 -->
@@ -41,6 +41,8 @@
 				:nowSortKey="nowSortKey"
 				:sortType="sortType"
 				:colKey="colKey"
+				:textColor="textColor"
+				:bg="bg"
 				@sort="handleSort(item1)"
 				:titleTextAlign="titleTextAlign">
 			</title-column>
@@ -68,7 +70,9 @@
 			// 是否树形数据
 			isTree: { type: Boolean, default: false },
 			height: { type: Number, default: 64 },
-			fontSize: { type: Number, default: 26 },
+			fontSize: { type: Number || String , default: 26 },
+			textColor: { type: String, default: '#333333'},
+			bg:{ type: String, default: '#f3f4f6'}
 		},
 		
 		computed: {

uni_modules/n-table/package.json

 {
   "id": "n-table",
   "displayName": "n-table 多级表头、树形结构，高度配置表格组件",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "n-table 多级表头、树形结构，高度配置表格组件",
   "keywords": [
     "表格,多级表头,树形结构,可配置"

uni_modules/n-table/readme.md

@@ -26,6 +26,8 @@ export default {
 		tableHeight: {type: [Number, Boolean],default: 0},
 		// 组件内自动排序，默认true
 		autoSort： { type: Boolean, default: true},
+		// 分页功能相关配置， 详细情况本文具体配置
+		pagerOpt: { type: Object },
 	}
 }
 ```
@@ -101,7 +103,6 @@ let columns: = [
 ```
 
 ## 表格基础配置：（`props:tableOpt`） ##
-1. 文字对齐方式、
 
 以下全部配置项(默认配置在`config.js -> defaultTableOpt`)
 ```javascript
@@ -141,7 +142,7 @@ columns = [
 		isImage:false, // 可选，默认false， 是否为图片
 		height: 64, // 可选，图片高度，仅在 isImage: true 情况下对图片生效
 		isLink: false, // 可选， 默认false，是否为链接
-		customName: '', // 可选，别名配置，默认空字符串  增加别名配置 2022年3月29日
+		customName: '', // 可选，别名配置，默认空字符串  增加别名配置 2022年3月29日 v1.0.2新增
 		children: [{title: 'xx1',key:'xxx1'},...]
 	},
 	...
@@ -169,6 +170,25 @@ tableData = [
 ]
 ```
 
+## 分页配置 ##   
+版本 v1.0.3 新增   
+**功能介绍**：  
+简单的功能组件，不喜欢的可以忽略不管，不影响原有功能。  
+> 本功能针对表格内部处理，不对外暴露事件；  
+> 主要根据传递进去的数据进行分页处理，分页数量计算：树形结构数据只根据第一层计算。  
+> 开启后底部会有一个简单的分页组件
+
+配置项：以下全部配置项(默认配置在`config.js -> defaultPagerOpt`)  
+```javascript
+export const defaultPagerOpt = {
+	// show Boolean | 是否启用分页功能
+	show: false,
+	// pageSize Number | 每页条数
+	pageSize: 10
+}
+
+```
+
 ## event 事件 ##
 
 `@onSort`  点击排序触发，返回 `{sortKey,sortType}`