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

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

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

这里暂时最多支持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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/253906.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis学习第八课:Redis高级实用特性(一)

Redis高级实用特性 注&#xff1a;我学习的环境是vmware7.1 ubantu10.10 redis 3.0.2 1、安全性 设置客户端连接后进行任何其他指定前需要的密码。因为redis速度相当快&#xff0c;一个外部用户可以在一秒钟进行很多次的密码尝试&#xff0c;这就需要设定非常强大的密码来防止…

分布式缓存的面试题9

1、面试题 如何保证缓存与数据库的双写一致性&#xff1f; 2、面试官心里分析 你只要用缓存&#xff0c;就可能会涉及到缓存与数据库双存储双写&#xff0c;你只要是双写&#xff0c;就一定会有数据一致性的问题&#xff0c;那么你如何解决一致性问题&#xff1f; 3、面试题剖析…

ROS与navigation教程——概述

navigation是ROS的二维导航功能包&#xff0c;简单来说&#xff0c;就是根据输入的里程计等传感器的信息流和机器人的全局位置&#xff0c;通过导航算法&#xff0c;计算得出安全可靠的机器人速度控制指令。 代码库&#xff1a;https://github.com/ros-planning/navigation 代…

Linux下c开发 之 线程通信与pthread_cond_wait()的使用

pthread_cond_wait() /************pthread_cond_wait()的使用方法**********/pthread_mutex_lock(&qlock); pthread_cond_wait(&qready, &qlock);pthread_mutex_unlock(&qlock);/*****************************************************/The mutex passed …

ROS与navigation教程——ACML参数配置

<launch> <!--//后为wiki官网的参数说明 &#xff08;&#xff09;中为粗读算法参数说明及理解 面临的问题常用地图有2种&#xff1a;1.基于特征&#xff0c;仅指明在指定位置&#xff08;地图中包含的对象的位置&#xff09;的环境的形状。特征表示使得调节对象的位置…

【设计模式】单例模式 Singleton Pattern

通常我们在写程序的时候会碰到一个类只允许在整个系统中只存在一个实例&#xff08;Instance&#xff09; 的情况&#xff0c; 比如说我们想做一计数器&#xff0c;统计某些接口调用的次数&#xff0c;通常我们的数据库连接也是只期望有一个实例。Windows系统的系统任务管理器…

修改输入框placeholder的默认样式

一般网页中都用到input的placeholder属性&#xff0c;想让这个默认样式和网页保持一致&#xff0c;就需要重新设定样式&#xff0c;百度百度&#xff1a; :-moz-placeholder { / color: #000; opacity:1; }支持/* Mozilla Firefox 4 to 18 * ::-moz-placeholder { color: #000;…

进程及线程通信总结

上文我们介绍了如何建立一个简单的多线程程序&#xff0c;多线程之间不可避免的需要进行通信 。相比于进程间通信来说&#xff0c;线程间通信无疑是相对比较简单的。 首先我们来看看最简单的方法&#xff0c;那就是使用全局变量&#xff08;静态变量也可以&#xff09;来进行通…

ROS multi-master——multimaster_fkie配置

多主站ROS配置和mutimaster_fkie ROS版本&#xff1a;kinetic 操作系统&#xff1a;Ubuntu 16.04。 multimaster_fkie&#xff1a;github 1网络配置 1.1路由器 设置无线路由器并连接两台计算机/机器人。为这两台计算机设置静态IP地址。相互测试ping命令和ssh。 1.2主机 …

Docker入门

1. Docker简介: docker是一个基于LXC的高级容器引擎。简单地说&#xff0c;docker是一个轻量级的虚拟解决方案&#xff0c;或者说它是一个超轻量级的虚拟机&#xff08;容器&#xff09;。 Docker是一个开源的引擎&#xff0c;可以轻松的为任何应用创建一个轻量级的、可移植的、…

乐器库的混合

每台微机一个声卡&#xff0c;也就是一片D/A&#xff0c;驱动按波特率、采样位数、采样通道传输给D/A&#xff0c;输出模拟音频。播放时仅一种与硬件支持格式对应&#xff0c;其他需驱动&#xff08;有损&#xff09;变换到硬件支持格式。每个应用都可单独播放声音&#xff0c;…

kafka认知--(1)

文档参考&#xff1a;http://kafka.apache.org/documentation.html 下载代码&#xff1a; tar -xzf kafka_2.11-0.11.0.0.tgz cd kafka_2.11-0.11.0.0 启动 bin/zookeeper-server-start.sh config/zookeeper.properties 创建topic&#xff08;主题为test&#xff0c;只有一个分…

带头尾指针的list的C实现

一、缘起 很早写了一个带头尾指针的list&#xff0c;该list支持从尾部插入元素&#xff0c;在任意位置删除元素&#xff0c;最近用这个list时发现一个bug&#xff0c;修正了&#xff0c;并加了几个接口函数。贴出来&#xff0c;希望对C的初学者有用。 二、基本说明 2.1、数据结…

Gmapping——从原理到实践

概述 在SLAM中&#xff0c;机器人位姿和地图都是状态变量&#xff0c;我们需要同时对这两个状态变量进行估计&#xff0c;即机器人获得一张环境地图的同时确定自己相对于该地图的位置。我们用x表示机器人状态&#xff0c;m表示环境地图&#xff0c;z表示传感器观测情况&#xf…

关于git分支

1.关于git分支 git的“分支”乍一听是一个特别容易让人产生错觉的概念&#xff0c;以为它和树枝一样是分叉的枝节&#xff0c;其实Git中的分支本质上是个指向commit对象的指针,每次commit&#xff0c;git都把它们串成一条时间线&#xff0c;这条时间线就是一个分支。 2.直接切换…

【机器学习经典算法源码分析系列】-- 逻辑回归

1.逻辑回归&#xff08;Logistic Regression&#xff09;又常被成为“逻辑斯蒂回归”&#xff0c;实质上是一个二元分类问题。 逻辑回归代价函数&#xff1a; 代价函数导数&#xff1a; Matlab实现&#xff1a; 采用matlab中自带的无约束最小化函数fminunc来代替梯度下降法&…

求特殊自然数

总时间限制: 1000ms 内存限制: 65536kB 描述一个十进制自然数,它的七进制与九进制表示都是三位数&#xff0c;且七进制与九进制的三位数码表示顺序正好相反。编程求此自然数,并输出显示。 输入无。输出三行&#xff1a;第一行是此自然数的十进制表示&#xff1b;第一行是此自然…

ROS——不同版本间ROS进行通信

在相同版本间的ROS进行通信不在赘述了&#xff0c;修改/etc/hosts文件即可。 最近项目遇到在Ubuntu16.04 与Ubuntu18.04两个系统间进行ROS通信&#xff0c;ROS版本分别为Kinetic和Melodic。配置网络后&#xff0c;两边都能够ping通&#xff0c;但是在获取ros数据是&#xff0c…

大数据开发实战:数据流图及相关数据技术

1、大数据流程图 2、大数据各个环节主要技术 2.1、数据处理主要技术 Sqoop&#xff1a;&#xff08;发音&#xff1a;skup&#xff09;作为一款开源的离线数据传输工具&#xff0c;主要用于Hadoop(Hive) 与传统数据库&#xff08;MySql,PostgreSQL&#xff09;间的数据传递。它…

oracle 中时间类型 date 与 long 互转

我们在保存时间到数据库时&#xff0c;有时候会保存long型的数据&#xff0c;固定长度是13位&#xff0c;是用当前时间减去1970-01-01&#xff0c;再换算成毫秒得到的结果。 但是要考虑到时区问题中国的时区时8区所以时间要加上8小时 oracle中的实现方式&#xff1a; ---------…