devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序跨行跨列多列复杂表格实现

作者：小蓝xlanll | 2024-02-14 18:05:00

赞

踩

小程序table跨行

今天来实现个跨行跨列多列表格。

如图，这是个列数不确定，有的单元格还要跨行跨列的复杂表格。

这里暂时最多支持4列，列数再多就放不下了。

实现原理

实现原理比较简单，通过多个嵌套的循环将数据取出。

上面的例子中，最外层一共有4行：基础工资，加班工资，岗位工资，合计。第一层数据的 name 展示为第一列，如果每组数据有 children，取出 children 展示为第二列… 如果 children 长度为0，则直接显示工资数额。

这样一层一层把数据剖开，就做到了上面的效果。

数据格式

模拟的数据如下，如果是最后一层 value 值为工资数额，否则值为 null。嵌套的数据在 children 中。

  1. // 模拟的数据
  2. export default {
  3.   status: 200,
  4.   code: "ok",
  5.   data: [{
  6.       id: 'table001',
  7.       name: '基础工资',
  8.       value: null,
  9.       children: [{
  10.           id: 'table0011',
  11.           name: '基本工资',
  12.           value: 3000.0,
  13.           children: []
  14.         },
  15.         {
  16.           id: 'table0012',
  17.           name: '绩效工资',
  18.           value: 1200.0,
  19.           children: []
  20.         },
  21.         {
  22.           id: 'table0013',
  23.           name: '基本工作量',
  24.           value: null,
  25.           children: [{
  26.               id: 'table00131',
  27.               name: '课时工资',
  28.               value: 800.0,
  29.               children: []
  30.             },
  31.             {
  32.               id: 'table00132',
  33.               name: '超课时工资',
  34.               value: 200.0,
  35.               children: []
  36.             },
  37.           ]
  38.         },
  39.       ]
  40.     },
  41.     {
  42.       id: 'table002',
  43.       name: '加班工资',
  44.       value: null,
  45.       children: [{
  46.           id: 'table0021',
  47.           name: '工作日加班',
  48.           value: 1000.0,
  49.           children: []
  50.         },
  51.         {
  52.           id: 'table0022',
  53.           name: '周末加班',
  54.           value: 600.0,
  55.           children: []
  56.         },
  57.       ]
  58.     },
  59.     {
  60.       id: 'table003',
  61.       name: '岗位工资',
  62.       value: 1800.0,
  63.       children: [
  64.  
  65.       ]
  66.     },
  67.     {
  68.       id: 'table004',
  69.       name: '合计',
  70.       value: 8600.0,
  71.       children: []
  72.     },
  73.   ]
  74. }
  75. 复制代码

页面布局

wxml文件

  1. <view class='container'>
  2.   <picker class='picker' mode='date' fields='month' bindchange='dateChange'>
  3.     <view class='picker-content'>
  4.       <image class='date-icon' src='../../assets/date_48.png'></image>
  5.       <view class='date-text'>{{currentDate}}</view>
  6.     </view>
  7.   </picker>
  8.   <view class='title-wrapper'>
  9.     <text class='title'>{{username + " 老师 " + currentDate + " 月工资表"}}</text>
  10.     <text class='yuan'>单位：元</text>
  11.   </view>
  12.   <view class='table-wrapper'>
  13.     <view class='nodata' wx:if='{{list.length === 0}}'>本月暂无工资数据</view>
  14.     <view class='row1' wx:if='{{list.length > 0}}' wx:for='{{list}}' wx:key='{{item.id}}'>
  15.       <text class='text'>{{item.name}}</text>
  16.       <view class='column2-wrapper'>
  17.         <view class='column-value' wx:if='{{item.value}}'>{{item.value}}</view>
  18.         <view class='column2' wx:if='{{item.children.length > 0}}' wx:for='{{item.children}}' wx:for-item='item2' wx:key='{{item2.id}}'>
  19.           <text class='text'>{{item2.name}}</text>
  20.           <view class='column3-wrapper'>
  21.             <view class='column-value' wx:if='{{item2.value}}'>{{item2.value}}</view>
  22.             <view class='column3' wx:if='{{item2.children.length > 0}}' wx:for='{{item2.children}}' wx:for-item='item3' wx:key='{{item3.id}}'>
  23.               <text class='text'>{{item3.name}}</text>
  24.               <view class='column4-wrapper'>
  25.                 <view class='column-value' wx:if='{{item3.value}}'>{{item3.value}}</view>
  26.               </view>
  27.             </view>
  28.           </view>
  29.         </view>
  30.       </view>
  31.     </view>
  32.   </view>
  33. </view>
  34. 复制代码

wxss 文件

  1. .container {
  2.   width: 100%;
  3.   display: flex;
  4.   flex-direction: column;
  5.   box-sizing: border-box;
  6.   background: white;
  7. }
  8.  
  9. .picker {
  10.   width: 100%;
  11. }
  12.  
  13. .date-text {
  14.   font-size: 32rpx;
  15.   padding: 20rpx 10rpx;
  16.   text-align: center;
  17. }
  18.  
  19. .title-wrapper {
  20.   display: flex;
  21.   width: 100%;
  22.   justify-content: center;
  23.   align-items: center;
  24.   padding: 20rpx;
  25.   box-sizing: border-box;
  26. }
  27.  
  28. .title {
  29.   flex: 1;
  30.   font-size: 34rpx;
  31.   text-align: center;
  32.   font-weight: 700;
  33.   color: #09bb07;
  34. }
  35.  
  36. .yuan {
  37.   font-size: 24rpx;
  38.   color: #09bb07;
  39. }
  40.  
  41. .table-wrapper {
  42.   width: 100%;
  43.   display: flex;
  44.   flex-direction: column;
  45.   border-top: 1rpx solid #DCDFE6;
  46. }
  47.  
  48. .row1 {
  49.   width: 100%;
  50.   display: flex;
  51.   flex-direction: row;
  52.   align-items: center;
  53.   font-size: 32rpx;
  54.   box-sizing: border-box;
  55.   border-bottom: 1rpx solid #DCDFE6;
  56.   
  57. }
  58.  
  59. .text {
  60.   flex: 1;
  61.   padding: 10rpx;
  62.   line-height: 60rpx;
  63.   height: 60rpx;
  64. }
  65.  
  66. .column2-wrapper {
  67.   display: flex;
  68.   flex-direction: column;
  69.   flex: 3;
  70.   justify-content: center;
  71.   border-left: 1rpx solid #DCDFE6;
  72. }
  73.  
  74. .column2 {
  75.   display: flex;
  76.   flex: 1;
  77.   align-items: center;
  78.   border-bottom: 1rpx solid #DCDFE6;
  79. }
  80.  
  81. .column2:last-child{
  82.   border-bottom: none;
  83. }
  84.  
  85. .column3-wrapper {
  86.   display: flex;
  87.   flex-direction: column;
  88.   flex: 2;
  89.   justify-content: center;
  90.   border-left: 1rpx solid #DCDFE6;
  91. }
  92.  
  93. .column3 {
  94.   display: flex;
  95.   flex: 1;
  96.   align-items: center;
  97.   border-bottom: 1rpx solid #DCDFE6;
  98. }
  99.  
  100. .column3:last-child{
  101.   border-bottom: none;
  102. }
  103.  
  104. .column-value{
  105.   display: flex;
  106.   align-self: flex-end;
  107.   margin-right: 10rpx;
  108.   padding: 10rpx;
  109.   line-height: 60rpx;
  110.   height: 60rpx;
  111. }
  112.  
  113. .column4-wrapper{
  114.   display: flex;
  115.   flex-direction: column;
  116.   flex: 1;
  117.   justify-content: center;
  118.   border-left: 1rpx solid #DCDFE6;
  119. }
  120.  
  121. .picker-content{
  122.   display: flex;
  123.   width: 100%;
  124.   justify-content: center;
  125.   align-items: center;
  126.   border-bottom: 1rpx solid rgba(7, 17, 27, 0.1);
  127. }
  128.  
  129. .date-icon{
  130.   width: 80rpx;
  131.   height: 80rpx;
  132. }
  133.  
  134. .nodata{
  135.   width: 100%;
  136.   text-align: center;
  137.   font-size: 32rpx;
  138.   color: #666;
  139.   padding: 20rpx;
  140. }
  141. 复制代码

js 文件

  1. import MockData from './mockdata.js'
  2. import {
  3.   formatTime
  4. } from '../../utils/util.js'
  5.  
  6. Page({
  7.   data: {
  8.     currentDate: '',
  9.     username: '张三',
  10.     list: ''
  11.   },
  12.   
  13.   onLoad: function () {
  14.     wx.setNavigationBarTitle({
  15.       title: '工资查询',
  16.     })
  17.     //设置当前年月
  18.     this.setCurrentDate()
  19.     this._getSalary()
  20.   },
  21.  
  22.   setCurrentDate(){
  23.     //获取当前年月
  24.     let date = new Date()
  25.     let fmtDate = formatTime(date).substring(0, 7)
  26.     this.setData({
  27.       currentDate: fmtDate,
  28.     })
  29.     console.log(fmtDate)
  30.   },
  31.  
  32.   //日期变化回调
  33.   dateChange(res) {
  34.     console.log(res)
  35.     let value = res.detail.value
  36.     this.setData({
  37.       currentDate: value
  38.     })
  39.     //请求数据
  40.     this._getSalary()
  41.   },
  42.  
  43.   //模拟请求数据
  44.   _getSalary(){
  45.     this.setData({
  46.       list: MockData.data
  47.     })
  48.   }
  49. })
  50. 复制代码

逻辑很简单，主要是布局稍微复杂些，理清楚了也挺好理解。

源码地址： https://github.com/cachecats/wechat-table

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/80947
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号