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

最新推荐文章于 2023-11-29 17:47:47 发布

原创

最新推荐文章于 2023-11-29 17:47:47 发布 · 5.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #跨行跨列 #列表 #表格

本文介绍了如何在微信小程序中实现一个跨行跨列的多列表格。文章详细讲解了实现原理，通过循环处理数据并展示，数据格式设计以及页面的wxml、wxss和js文件的布局逻辑。源码已上传至GitHub。

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

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

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