今天來實現個跨行跨列多列表格。

如圖，這是個列數不確定，有的單元格還要跨行跨列的復雜表格。

這里暫時最多支持4列，列數再多就放不下了。

實現原理

實現原理比較簡單，通過多個嵌套的循環將數據取出。

上面的例子中，最外層一共有4行：基礎工資，加班工資，崗位工資，合計。第一層數據的 name 展示為第一列，如果每組數據有 children，取出 children 展示為第二列… 如果 children 長度為0，則直接顯示工資數額。

這樣一層一層把數據剖開，就做到了上面的效果。

數據格式

模擬的數據如下，如果是最后一層 value 值為工資數額，否則值為 null。嵌套的數據在 children 中。

// 模擬的數據 export default {status: 200,code: "ok",data: [{id: 'table001',name: '基礎工資',value: null,children: [{id: 'table0011',name: '基本工資',value: 3000.0,children: []},{id: 'table0012',name: '績效工資',value: 1200.0,children: []},{id: 'table0013',name: '基本工作量',value: null,children: [{id: 'table00131',name: '課時工資',value: 800.0,children: []},{id: 'table00132',name: '超課時工資',value: 200.0,children: []},]},]},{id: 'table002',name: '加班工資',value: null,children: [{id: 'table0021',name: '工作日加班',value: 1000.0,children: []},{id: 'table0022',name: '周末加班',value: 600.0,children: []},]},{id: 'table003',name: '崗位工資',value: 1800.0,children: []},{id: 'table004',name: '合計',value: 8600.0,children: []},] } 復制代碼

頁面布局

wxml文件

<view class='container'><picker class='picker' mode='date' fields='month' bindchange='dateChange'><view class='picker-content'><image class='date-icon' src='../../assets/date_48.png'></image><view class='date-text'>{{currentDate}}</view></view></picker><view class='title-wrapper'><text class='title'>{{username + " 老師 " + currentDate + " 月工資表"}}</text><text class='yuan'>單位：元</text></view><view class='table-wrapper'><view class='nodata' wx:if='{{list.length === 0}}'>本月暫無工資數據</view><view class='row1' wx:if='{{list.length > 0}}' wx:for='{{list}}' wx:key='{{item.id}}'><text class='text'>{{item.name}}</text><view class='column2-wrapper'><view class='column-value' wx:if='{{item.value}}'>{{item.value}}</view><view class='column2' wx:if='{{item.children.length > 0}}' wx:for='{{item.children}}' wx:for-item='item2' wx:key='{{item2.id}}'><text class='text'>{{item2.name}}</text><view class='column3-wrapper'><view class='column-value' wx:if='{{item2.value}}'>{{item2.value}}</view><view class='column3' wx:if='{{item2.children.length > 0}}' wx:for='{{item2.children}}' wx:for-item='item3' wx:key='{{item3.id}}'><text class='text'>{{item3.name}}</text><view class='column4-wrapper'><view class='column-value' wx:if='{{item3.value}}'>{{item3.value}}</view></view></view></view></view></view></view></view> </view> 復制代碼

wxss 文件

.container {width: 100%;display: flex;flex-direction: column;box-sizing: border-box;background: white; }.picker {width: 100%; }.date-text {font-size: 32rpx;padding: 20rpx 10rpx;text-align: center; }.title-wrapper {display: flex;width: 100%;justify-content: center;align-items: center;padding: 20rpx;box-sizing: border-box; }.title {flex: 1;font-size: 34rpx;text-align: center;font-weight: 700;color: #09bb07; }.yuan {font-size: 24rpx;color: #09bb07; }.table-wrapper {width: 100%;display: flex;flex-direction: column;border-top: 1rpx solid #DCDFE6; }.row1 {width: 100%;display: flex;flex-direction: row;align-items: center;font-size: 32rpx;box-sizing: border-box;border-bottom: 1rpx solid #DCDFE6;}.text {flex: 1;padding: 10rpx;line-height: 60rpx;height: 60rpx; }.column2-wrapper {display: flex;flex-direction: column;flex: 3;justify-content: center;border-left: 1rpx solid #DCDFE6; }.column2 {display: flex;flex: 1;align-items: center;border-bottom: 1rpx solid #DCDFE6; }.column2:last-child{border-bottom: none; }.column3-wrapper {display: flex;flex-direction: column;flex: 2;justify-content: center;border-left: 1rpx solid #DCDFE6; }.column3 {display: flex;flex: 1;align-items: center;border-bottom: 1rpx solid #DCDFE6; }.column3:last-child{border-bottom: none; }.column-value{display: flex;align-self: flex-end;margin-right: 10rpx;padding: 10rpx;line-height: 60rpx;height: 60rpx; }.column4-wrapper{display: flex;flex-direction: column;flex: 1;justify-content: center;border-left: 1rpx solid #DCDFE6; }.picker-content{display: flex;width: 100%;justify-content: center;align-items: center;border-bottom: 1rpx solid rgba(7, 17, 27, 0.1); }.date-icon{width: 80rpx;height: 80rpx; }.nodata{width: 100%;text-align: center;font-size: 32rpx;color: #666;padding: 20rpx; } 復制代碼

js 文件

import MockData from './mockdata.js' import {formatTime } from '../../utils/util.js'Page({data: {currentDate: '',username: '張三',list: ''},onLoad: function () {wx.setNavigationBarTitle({title: '工資查詢',})//設置當前年月this.setCurrentDate()this._getSalary()},setCurrentDate(){//獲取當前年月let date = new Date()let fmtDate = formatTime(date).substring(0, 7)this.setData({currentDate: fmtDate,})console.log(fmtDate)},//日期變化回調dateChange(res) {console.log(res)let value = res.detail.valuethis.setData({currentDate: value})//請求數據this._getSalary()},//模擬請求數據_getSalary(){this.setData({list: MockData.data})} }) 復制代碼

邏輯很簡單，主要是布局稍微復雜些，理清楚了也挺好理解。

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的小程序跨行跨列多列复杂表格实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。