diff --git a/pages/index/index.vue b/pages/index/index.vue
index c74b99616f826a068005d1847592501c02f8b81a..ced4ae76b11138d12476a6f2e23d3a064372cba7 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -2,11 +2,12 @@
color 不生效 [2022年4月1日]
+2. 新增分页功能,详细请看文档相关配置 [2022年4月1日]
+
## 1.0.2(2022-04-01)
1. add: 新增 columns 配置: customName , 别名;如果 customName 存在 则优先显示,否则显示 title
2. fix: 修复表格名称居中显示实际没有居中的问题
diff --git a/uni_modules/n-table/components/n-table/config.js b/uni_modules/n-table/components/n-table/config.js
index 5b30b23dabab4cb3cf1f1770a209b23374e032d7..2339302bcc91e35d56c0e5c6e6c0021f764a5520 100644
--- a/uni_modules/n-table/components/n-table/config.js
+++ b/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
diff --git a/uni_modules/n-table/components/n-table/n-table.vue b/uni_modules/n-table/components/n-table/n-table.vue
index e15bf43dd75389a5c6903e28c8d234752d03286e..da7e61a8a437aa1554415b262da77d9971be6c46 100644
--- a/uni_modules/n-table/components/n-table/n-table.vue
+++ b/uni_modules/n-table/components/n-table/n-table.vue
@@ -43,6 +43,7 @@
+
@@ -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: }]
- *
- * */
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 {
diff --git a/uni_modules/n-table/components/n-table/pager.vue b/uni_modules/n-table/components/n-table/pager.vue
new file mode 100644
index 0000000000000000000000000000000000000000..87807a249772233cf6ffb19bb5f10c0904e87f04
--- /dev/null
+++ b/uni_modules/n-table/components/n-table/pager.vue
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
diff --git a/uni_modules/n-table/components/n-table/table-body.vue b/uni_modules/n-table/components/n-table/table-body.vue
index b8775a70966754456125fdc10d30325beba6a8b6..99785affdfef631b853511927a3052f57864aec3 100644
--- a/uni_modules/n-table/components/n-table/table-body.vue
+++ b/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 },
diff --git a/uni_modules/n-table/components/n-table/table-header.vue b/uni_modules/n-table/components/n-table/table-header.vue
index 4e76ea1e8d1b51d96e251bc8ba012913071c02c4..5ba1b63861d1ca90234e3777365eb824792c8bd1 100644
--- a/uni_modules/n-table/components/n-table/table-header.vue
+++ b/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"
diff --git a/uni_modules/n-table/components/n-table/table-name.vue b/uni_modules/n-table/components/n-table/table-name.vue
index a0863543e356aaf0d191f9cefeb84bb280925c61..1d2ad3b75aa0d234f43d21cd557337c9b50212cc 100644
--- a/uni_modules/n-table/components/n-table/table-name.vue
+++ b/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 {
diff --git a/uni_modules/n-table/components/n-table/title-column.vue b/uni_modules/n-table/components/n-table/title-column.vue
index 24447a0a13c24277eb646fd71ee569b937eb5fa0..690f31c4b3c2c8634b1db54e208610236f9b5295 100644
--- a/uni_modules/n-table/components/n-table/title-column.vue
+++ b/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">
@@ -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: {
diff --git a/uni_modules/n-table/package.json b/uni_modules/n-table/package.json
index bd550fc089b195bdf6ef9522edba97093f121853..08c79857bf19716f6f55dc6485e0e1b2fb7b0da5 100644
--- a/uni_modules/n-table/package.json
+++ b/uni_modules/n-table/package.json
@@ -1,7 +1,7 @@
{
"id": "n-table",
"displayName": "n-table 多级表头、树形结构,高度配置表格组件",
- "version": "1.0.2",
+ "version": "1.0.3",
"description": "n-table 多级表头、树形结构,高度配置表格组件",
"keywords": [
"表格,多级表头,树形结构,可配置"
diff --git a/uni_modules/n-table/readme.md b/uni_modules/n-table/readme.md
index 5aa39598985c67a05a66ec128635d67b36408819..a0977348a88f22e832cc0165176644f264a0a4ad 100644
--- a/uni_modules/n-table/readme.md
+++ b/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}`