Skip to content

N
n-table示例

沐夕花开 / n-table示例

通知 4
Star 0
Fork 0
N
n-table示例

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 197a3a7e 编写于 作者: 沐夕花开's avatar 沐夕花开
浏览文件
操作

add: 增加【模式】用法配置；fix:修复多级表头列数过少无法占满的问题

上级 1f779585
隐藏空白更改
内联 并排
Showing with 308 addition and 82 deletion
App.vue
浏览文件 @ 197a3a7e
......@@ -12,6 +12,33 @@
}
</script>
<style>
<style lang="scss">
/*每个页面公共css */
.info-tx {
padding: 10px;
font-size: 13px;
line-height: 1.4;
}
.ep-btn {
display: inline-block;
margin: 0 auto;
}
.tx-line {
padding: 5rpx 0;
padding-left: 30rpx;
position: relative;
&:after {
content: '';
background-color: rgb(41, 121, 255);
left: 5rpx;
top: 17rpx;
position: absolute;
width: 15rpx;
height: 15rpx;
border-radius: 50%;
}
}
</style>
pages.json
浏览文件 @ 197a3a7e
......@@ -21,6 +21,15 @@
}
}
,{
"path" : "pages/index/table2",
"style" :
{
"navigationBarTitleText": "表格2",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"pageOrientation": "auto",
......
pages/index/index.vue
浏览文件 @ 197a3a7e
......@@ -3,6 +3,7 @@
<view class="link-wrap">
<navigator url="./table1" text="示例2" class="jump-link">示例2</navigator>
<navigator url="./fullPage" text="全屏示例2" class="jump-link">全屏示例</navigator>
<navigator url="./table2" text="模式示例" class="jump-link">模式示例</navigator>
</view>
<n-table
......
pages/index/table1.vue
浏览文件 @ 197a3a7e
......@@ -121,36 +121,4 @@
padding-bottom: 30px;
width: 100%;
}
.info-tx {
padding: 10px;
font-size: 13px;
line-height: 1.4;
}
.ep-btn {
display: inline-block;
margin: 0 auto;
}
.border-bottom {
border-bottom: 1rpx solid #333;
}
.tx-line {
padding: 5rpx 0;
padding-left: 30rpx;
position: relative;
&:after {
content: '';
background-color: rgb(41, 121, 255);
left: 5rpx;
top: 17rpx;
position: absolute;
width: 15rpx;
height: 15rpx;
border-radius: 50%;
}
}
</style>
pages/index/table2.js 0 → 100644
浏览文件 @ 197a3a7e
export const columns = [
{ "title": "区域", "dataIndex": "区域" },
{ "title": "小区", "dataIndex": "小区", textAlign: 'left', titleTextAlign: 'center' },
{
"title": "销售",
"dataIndex": "销售",
"color": "red",
"bodyColor": 'green',
columnFmt: "number",
suffix: '￥',
prefix: 'A',
columnUnit: "￥",
useThousandth: true,
columnNumberCount: '1',
"textAlign": 'center',
"titleTextAlign": 'left'
},
{
"title": "计划销售",
"dataIndex": "计划销售",
columnFmt: "number",
hidden: false,
columnNumberCount: "2",
},
{
"title": "达成",
"dataIndex": "达成",
columnSort: 3,
customName: null,
isImage: false,
isLink: false,
sort: false,
columnFmt: "percentage",
suffix: '￥',
prefix: 'A',
columnUnit: "xxx",
columnNumberCount: "2",
useThousandth: true,
},
{ "title": "达成排名", "dataIndex": "达成排名", "sort": true }
]
export const tableData = [
{ "key": 0, "区域": "广州", "小区": "广州一区", "销售": 60.023343, "计划销售": 120.0012, "达成": "0.0531", "达成排名": 1 },
{ "key": 1, "区域": "广州", "小区": "广州二区", "销售": 4090342342, "计划销售": 990.123, "达成": "0.50", "达成排名": 1 },
{ "key": 2, "区域": "深圳", "小区": "深圳一区", "销售": 110.23421, "计划销售": 150.232323, "达成": "0.73", "达成排名": 2 },
{ "key": 3, "区域": "深圳", "小区": "深圳二区", "销售": 90.23434, "计划销售": 150.454545, "达成": "0.60", "达成排名": 1 },
{ "key": 4, "区域": "北京", "小区": "北京一区", "销售": 70.2342343, "计划销售": 60.45453, "达成": "0.116", "达成排名": 1 },
{ "key": 5, "区域": "北京", "小区": "北京二区", "销售": 120, "计划销售": 60.34534, "达成": "0.200", "达成排名": 3 },
{ "key": 6, "区域": "北京", "小区": "北京三区", "销售": 110, "计划销售": 80, "达成": "0.137", "达成排名": 2 },
{ "key": 7, "区域": "广州", "销售": 100, "计划销售": 200, "达成": "0.50", "达成排名": 1, "GroupIndex": 1, "GroupLayer": 1, "GroupKey": "广州" },
{ "key": 8, "区域": "深圳", "销售": 200, "计划销售": 300, "达成": "0.66", "达成排名": 2, "GroupIndex": 1, "GroupLayer": 1, "GroupKey": "深圳" },
{ "key": 9, "区域": "北京", "销售": 300, "计划销售": 200, "达成": "0.150", "达成排名": 3, "GroupIndex": 1, "GroupLayer": 1, "GroupKey": "北京" }
]
pages/index/table2.vue 0 → 100644
浏览文件 @ 197a3a7e
<template>
<view>
<n-table
:headerOpt="headerOpt"
:nameOpt="{isShow:true, title: '模式演示', align: 'left'}"
:tableOpt="{isShowSum:true,fontSize:14}"
:tableHeight="0"
:tableData="tableData"
:columns="columns"
:pagerOpt="{show:true,pageSize: 10,btnFontSize:14, btnFontColor: '#2b85e4', numFontColor: '#fa3534'}"
colKey="dataIndex"
idKey="key"></n-table>
<view class="info-tx">
<view class="tx-line">[销售]列使用了数值模式(columnFmt = number)，和使用千分位(useThousandth = true),保留一位小数(columnNumberCount
= 1)；
<br />注意：[销售]列同时设置了 suffix和prefix，但是不会生效（这两个只在货币模式生效）。
</view>
<view class="tx-line">[达成]列使用了百分比模式(columnFmt = percentage)，和保留两位小数(columnNumberCount = 2)</view>
<view class="tx-line">示例数据： pages > index > table2.js</view>
</view>
<view class="info-tx">
<view class="tx-line">模式说明：</view>
<view class="tx-line">模式相关配置：columnFmt, suffix, prefix, columnUnit, useThousandth, columnNumberCount</view>
<view class="tx-line">
模式相关columns配置：columnFmt(处理模式)，suffix(后缀),prefix(前缀),columnUnit(单位),useThousandth(是否使用千分位),columnNumberCount(保留小数位)
</view>
<view class="tx-line">默认模式(columnFmt = default)：不对列数据进行任何处理</view>
<view class="tx-line">数值模式(columnFmt = number): 此时 columnNumberCount 、 useThousandth 、 columnUnit 生效 </view>
<view class="tx-line">百分比模式(columnFmt = percentage): 对数据进行 * 100 处理并拼接 % 符号，此时 `columnNumberCount` 生效
</view>
<view class="tx-line">货币模式(columnFmt = currency): 此时columnNumberCount 、useThousandth 、prefix、suffix生效</view>
<view class="tx-line">科学计数法模式(columnFmt = scientific): 科学计算法模式，将数据处理成科学计算法显示 eg: 1.2e2</view>
</view>
</view>
</template>
<script>
import { columns, tableData } from "./table2.js"
export default {
data() {
return {
columns: false,
tableData: []
}
},
onReady() {
this.columns = JSON.parse(JSON.stringify(columns))
this.tableData = JSON.parse((JSON.stringify(tableData)))
},
methods: {
}
}
</script>
<style>
</style>
pages/index/tableData.js
浏览文件 @ 197a3a7e
......@@ -11,7 +11,7 @@ export const mulColumns = [{
sort: true,
format: { template: "<span style='color:red;'>当前#广州一区销售#</span>", names: ['广州一区销售'] },
},
{ "title": "计划销售", "dataIndex": "广州一区计划销售", textAlign: 'left', titleTextAlign: 'left' },
// { "title": "计划销售", "dataIndex": "广州一区计划销售", textAlign: 'left', titleTextAlign: 'left' },
{ "title": "达成", "dataIndex": "广州一区达成", sort: true }
]
},
......@@ -90,6 +90,7 @@ export const baseColumns = [
"bodyColor": 'green',
formatNum: false,
textAlign: 'right',
formatNum: true,
titleTextAlign: 'left'
},
{ "title": "计划销售", "dataIndex": "计划销售", hidden: false },
......@@ -207,13 +208,13 @@ export const treeColumns = [{
export const columns2 = [{
"title": "区域",
"dataIndex": "区域",
"textAlign":'center'
"textAlign": 'center'
},
{
"title": "销售",
"dataIndex": "销售",
"sort": true,
"textAlign":'left',
"textAlign": 'left',
hidden: false
},
{
......@@ -250,7 +251,7 @@ export const tableData2 = [
export const columns3 = [{
"title": "区域",
"dataIndex": "区域",
textAlign:'center'
textAlign: 'center'
},
{
"title": "销售",
......@@ -323,7 +324,7 @@ export const groupData = [{
export const enumColumns = [{
"title": "姓名",
"dataIndex": "姓名",
textAlign:'left'
textAlign: 'left'
},
{
"title": '头像',
......@@ -347,7 +348,7 @@ export const enumColumns = [{
0: '女',
1: '男'
}
},
},
]
// 字段映射示例 tableData
......
uni_modules/n-table/changelog.md
浏览文件 @ 197a3a7e
## 1.3.0（2022-05-24）
1. add: 新增 columns[item].columnFmt 格式化
> 可选值：
> `default`: 默认模式，不对数据处理
> `number`: 数值模式，此时 `columnNumberCount` 、 `useThousandth` 、 `columnUnit` 生效
> `percentage`: 百分比模式（源数据是百分比数值），对数据进行 * 100 并拼接 %，此时 `columnNumberCount` 生效
> `currency`: 货币模式，此时`columnNumberCount` 、`useThousandth` 、`prefix`、`suffix`生效
> `scientific`: 科学计算法模式，将数据处理成科学计算法显示 eg: 1.2e2
2. add: 新增 columns[item].columnUnit 单位(等于'无'时忽略此参数) `columnFmt == number`时生效
3. add: 新增 columns[item].useThousandth 是否使用千分位 `columnFmt == number || columnFmt== currency`时生效
4. add: 新增 columns[item].columnNumberCount 小数位 `columnFmt == number || columnFmt== percentage || columnFmt== currency`时生效
5. add: 新增 columns[item].prefix 前缀`columnFmt == currency`时生效
6. add: 新增 columns[item].suffix 后缀`columnFmt == currency`时生效
7. fix: 修复多级表头列数过少无法占满的问题。
8. update: columns[item].formatNum 默认值调整为`false`(原来默认是true)，此参数优先级高于上述的 5种模式
## 1.2.6（2022-05-07）
1. fix: 修复columns 第一项设置textAlign无效的问题：树形表格首列固定左对齐，其他可以自行设置 columns -> textAlign；
## 1.2.5（2022-05-06）
......
uni_modules/n-table/components/n-table/n-table.vue
浏览文件 @ 197a3a7e
......@@ -246,7 +246,7 @@
//
columnsDeal(list, level = 0) {
list.forEach(item => {
list.filter(it => !it.Hidden).forEach(item => {
let { children, ...res } = item
if (children && children.length) {
this.columnsDeal(children, level + 1)
......@@ -358,7 +358,7 @@
})
},
dosum({ noSum = false, formatNum = true, ...row }) {
dosum({ noSum = false, formatNum = false, ...row }) {
let key = row[this.colKey]
let sum = '-'
if (noSum) return sum
......
uni_modules/n-table/components/n-table/table-body.vue
浏览文件 @ 197a3a7e
<template>
<view class="body-wrapper" ref="bodyWrapper" id="bodyWrapper">
<block v-for="(row, iIndex) in dataList" :key="iIndex">
<block v-for="(row, iIndex) in dataList" :key="iIndex">
<!-- 分组 -->
<block v-if="isGroup">
<view class="n-table-container-row group-row" :key="iIndex">
......@@ -31,8 +31,7 @@
width: getItemStyle(col).width,
paddingLeft: jIndex == 0 ? ( isTree ? (row.level + 1) : row.level )*8 + 'px' : '8px',
}"
:key="jIndex"
>
:key="jIndex">
<view
:class="['n-table-col-text', {'text-left': getTextAlign(col) === 'left' , 'text-center': getTextAlign(col) === 'center' , 'text-right': getTextAlign(col) === 'right'}]"
:style="{color: col.bodyColor || color, fontSize: fontSize + 'px'}">
......@@ -40,7 +39,7 @@
<view class="tx-content" v-if="!col.isLink && !col.isImage"
v-html="getRowContent(child, col)">
</view>
<!-- 图片 -->
<view v-if="col.isImage" class="n-table-col-img">
......@@ -94,7 +93,7 @@
width: getItemStyle(col).width,
paddingLeft: jIndex == 0 ? ( isTree ? (row.level + 1) : row.level )*8 + 'px' : '8px',
}"
:key="jIndex"
:key="jIndex"
@click.stop="itemClick(row, col)">
<!-- 展开 -->
<view
......@@ -147,12 +146,12 @@
</view>
</view>
</block>
</view>
</block>
</block>
</view>
</template>
......@@ -331,46 +330,120 @@
* @param {Object} col
*/
getRowContent(row, col) {
let { valueEnum, formatNum = true, format, render } = col
let {
valueEnum,
formatNum = false,
format,
render,
columnUnit,
columnFmt = 'default',
useThousandth = false,
prefix,
suffix,
columnNumberCount
} = col
// columnFmt（数值类型）: default:默认 number：数值 percentage：百分比 scientific：科学型
// columnUnit（单位） ： 直接拼接到后面
// useThousandth（是否使用千分位） Boolean
// columnNumberCount（小数位数）
let celValue = row[col[this.colKey]]
let tempHTML = ''
let result = '' // 保存结果
// 空值处理
if ([null, '', (void 0)].includes(celValue)) return '-'
// 字段映射
if (valueEnum) {
tempHTML = this.getEnumValue(celValue, valueEnum)
tempHTML = this.getEnumValue(celValue || '-', valueEnum)
// 存在映射值则直接返回
if (tempHTML) return tempHTML.toString()
}
// 其他值
if (celValue || celValue === 0) {
// 自动处理数字
if(formatNum){
tempHTML = isNaN(celValue - 0) || !formatNum ? celValue : this.numTransform(celValue - 0)
return tempHTML.toString()
}
result = this.fmtValue({
value: celValue,
columnFmt,
useThousandth,
columnNumberCount,
columnUnit,
prefix,
suffix
})
return result.toString()
},
// 处理显示数据
fmtValue({ value, columnFmt, useThousandth, columnNumberCount, columnUnit, prefix, suffix }) {
if (!columnFmt) return value
if (columnUnit === '无') columnUnit = ''
// 默认
const numValue = Number(value)
const isNumber = !isNaN(numValue)
let tempResult = value
if (columnFmt === 'default') {
// 默认直接返回 值
return value
}
if (columnFmt === 'number') {
// 数字类型
if (!isNumber) return value
if (this.isValidData(columnNumberCount)) tempResult = numValue.toFixed(Number(columnNumberCount))
if (useThousandth) tempResult = this.setThousandth(tempResult)
return tempResult + (columnUnit ? columnUnit : '')
} else if (columnFmt === 'percentage') {
// 百分比：数值乘以 100 并加上 %
if (!isNumber) return value
tempResult = numValue * 100
if (this.isValidData(columnNumberCount)) tempResult = tempResult.toFixed(Number(columnNumberCount))
return tempResult + '%'
} else if (columnFmt === 'scientific') {
// 科学计算型:
if(!isNumber) return value
let p = Math.floor(Math.log(numValue) / Math.LN10);
let n = numValue * Math.pow(10, -p);
return n + 'e' + p
} else if (columnFmt === 'currency') {
// 货币：
// 不是数字类型,直接拼接 前缀后缀返回
if (!isNumber) {
// 前缀 后缀
return `${prefix || ''}${value}${suffix || ''}`
}
// 小数位
if (isNumber && this.isValidData(columnNumberCount)) {
tempResult = numValue.toFixed(Number(columnNumberCount))
}
// 是否使用千分位
if (isNumber && useThousandth) {
tempResult = this.setThousandth(tempResult)
}
return `${prefix || ''}${tempResult}${suffix || ''}`
}
},
// 千分位
setThousandth(val) {
const num = String(val)
const reg = /\d{1,3}(?=(\d{3})+$)/g
const res = num.replace(/^(-?)(\d+)((\.\d+)?)$/, function(match, s1, s2, s3) {
return s1 + s2.replace(reg, '$&,') + s3
})
return res
},
return celValue.toString()
// if (!!format) {
// let tempFormat = col.format.template
// col.format.names.map(item => {
// let regexp = new RegExp(`\#${item}\#`, 'mg')
// tempFormat = tempFormat.replace(regexp, row[item])
// })
// tempHTML = tempFormat
// } else if (celValue || celValue === 0) {
// tempHTML = isNaN(celValue - 0) || !formatNum ?
// celValue :
// this.numTransform(celValue - 0)
// // tempHTML = tempHTML == 0 ? "-" : tempHTML
// } else if (!col.render) {
// let error = new Error('数据的key或format值至少一个不为空')
// throw error
// }
// return tempHTML.toString()
// 判断字符串值是否有效
isValidData(val) {
return val && val !== null && val !== undefined && val !== ''
},
/**
......
uni_modules/n-table/components/n-table/table-header.vue
浏览文件 @ 197a3a7e
......@@ -78,6 +78,17 @@
justify-content: flex-start;
}
.n-table-title {
.header-item:last-of-type {
width: 100%;
.title-column-item {
width: 100% !important;
flex: 1;
}
}
}
.header-sticky {
position: sticky;
left: 0;
......
uni_modules/n-table/components/n-table/title-column.vue
浏览文件 @ 197a3a7e
<template>
<view
class="title-column-item n-border border-right">
class="title-column-item n-border border-right" :style="{width:itemStyle.width} ">
<!-- n-border border-bottom border-right -->
<view
class="n-table-title-item"
@click.stop="handleSort(item)"
:class="{ 'n-border border-bottom': item.children && item.children.length }"
:style="{
width:itemStyle.width,
height:itemStyle.height,
lineHeight:itemStyle.lineHeight,
fontSize: itemStyle.fontSize,
color:item.color || textColor || '#333'
}"
>
}">
<view
:class="['n-table-col-text', {'text-left': titleTextAlign === 'left', 'text-center': titleTextAlign === 'center', 'text-right': titleTextAlign === 'right'}]"
>
:class="['n-table-col-text', {'text-left': titleTextAlign === 'left', 'text-center': titleTextAlign === 'center', 'text-right': titleTextAlign === 'right'}]">
<!-- 树形结构 统一展开、收起 -->
<view v-if="firstCol && isTree" @click.stop="toggleExpand" class="iconfont toggle-btn"
......@@ -189,11 +186,16 @@
.sub-item {
display: flex;
.title-column-item:last-of-type {
flex: 1;
}
}
.n-table-title-item {
box-sizing: border-box;
width: 100%;
flex: 1;
}
.sort {
......
uni_modules/n-table/package.json
浏览文件 @ 197a3a7e
{
"id": "n-table",
"displayName": "n-table 多级表头、树形结构，高度配置表格组件",
"version": "1.2.6",
"version": "1.3.0",
"description": "n-table 多级表头、树形结构，高度配置表格组件",
"keywords": [
"表格,多级表头,树形结构,可配置"
......
uni_modules/n-table/readme.md
浏览文件 @ 197a3a7e
......@@ -165,13 +165,20 @@ columns = [
height: 32, // 可选，图片高度，仅在 isImage: true 情况下对图片生效 数字类型，单位 px [v1.1.1]调整
isLink: false, // 可选， 默认false，是否为链接
customName: '', // 可选，别名配置，默认空字符串 增加别名配置 2022年3月29日 v1.0.2新增
formatNum:true, // 可选，默认true，是否自动格式化数字(大数字自动添加单位处理) v1.0.6
formatNum:false, // 可选，默认false，是否自动格式化数字(大数字自动添加单位处理) [v1.3.0]调整
hidden: false, // 可选， 默认 false ，是否隐藏当前列 [v1.1.1]
textAlign, // 可选 | String | 对应列内容文字对齐方式，优先级比 tableOpt.textAlign 高，不填则取tableOpt.textAlign值，两个都不填，默认 center [v1.1.0]
titleTextAlign , // 可选 | String | 对应列表头文字对齐方式，优先级比 headerOpt.align 高，不填则取 headerOpt.align 值，两个都不填，默认 center [v1.1.0]
valueEnum, // 可选 | Object | 字段映射对象，将当前值映射为对应的值[v1.2.0]
noSum: true, // 可选 | Boolean | 是否计算总计列 | 默认 true | 设置 false 后不计算当前列的总计
children: [{title: 'xx1',key:'xxx1'},...]
children: [{title: 'xx1',key:'xxx1'},...],
columnFmt: 'default', // 数据处理模式(详细请查看更新说明) [v1.3.0]新增
columnUnit: '无', // 详细请查看更新说明[v1.3.0]新增
useThousandth: false, // 详细请查看更新说明[v1.3.0]新增
columnNumberCount:'', // 详细请查看更新说明[v1.3.0]新增
prefix:'', // 详细请查看更新说明[v1.3.0]新增
suffix:'', // 详细请查看更新说明[v1.3.0]新增
},
...
]
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或