当前位置: 首页 > news >正文

微信小程序:动态表格实现,表头单元格数据完全从data中获取,宽度自定义,自定义文本框,行勾选,样式效果,横向滚动表格(解决背景色不足的问题)等

一、样式效果 

二、代码

1、wxml

<view class="line flex flex-center">
  <view class="none" wx:if="{{info.length == 0}}">暂无料号</view>
  <view wx:else class="table-container">
    <!-- 动态生成表头 -->
    <view class="table-header-wrapper">
      <view class="table-header flex">
        <view wx:for="{{tableColumns}}" wx:key="key" class="th" style="flex: 0 0 {{item.width}}; min-width: {{item.width}};">
          {{item.title}}
        </view>
      </view>
    </view>
    <!-- 表格数据行 -->
    <view class="table-body-wrapper">
      <view class="table-body">
        <view class="table-row flex {{rowData.checked ? 'row-selected' : ''}}" wx:for="{{info}}" wx:key="index" wx:for-item="rowData" data-id="{{rowData.id}}">
          <view wx:for="{{tableColumns}}" wx:key="key" wx:for-item="colConfig" class="td" style="flex: 0 0 {{colConfig.width}}; min-width: {{colConfig.width}};">
            <block wx:if="{{colConfig.key === 'checked'}}">
              <checkbox value="{{rowData.id}}" checked="{{rowData.checked}}" bindtap="handleSelectItem" data-id="{{rowData.id}}" />
            </block>
            <block wx:elif="{{colConfig.editable}}">
              <!-- 新增判断条件 -->
              <input type="number" value="{{rowData[colConfig.key]}}" placeholder="请输入" bindinput="handleInputChange" data-id="{{rowData.id}}" data-index="{{index}}" data-key="{{colConfig.key}}" />
            </block>
            <block wx:else>
              {{rowData[colConfig.key] || '--'}}
            </block>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
<view class="btn" bindtap="submitCheckedItems">
  提交
</view>

2、wxss

/* 行关系 */
.line {
  width: 100%;
  margin-top: 50px;
}

.none {
  color: rgb(153, 153, 153);
}

/* 表格容器 */
.table-container {
  width: 100%;
  font-size: 12px;
  overflow-x: auto;
}

/* 表头包装器 */
.table-header-wrapper {
  width: max-content;
  min-width: 100%;
}

/* 表头样式 */
.table-header {
  border-bottom: 1px solid #eaeaea;
  background-color: #b9e3fc;
}

/* 表格内容包装器 */
.table-body-wrapper {
  width: fit-content;
}

/* 表头和表格行通用样式 */
.table-header,
.table-row {
  display: flex;
  align-items: center;
}

/* 表头单元格和表格单元格 */
.th,
.td {
  padding: 8px 0;
  text-align: center;
  word-break: break-word;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 表格行样式 */
.table-row {
  min-width: 100%;
}

/* 隔行变色效果(可选) */
.table-row:nth-child(even) {
  background-color: #ececec;
}

/* 复选框样式调整 */
.td checkbox {
  transform: scale(0.7);
}

/* 选中行样式 */
.row-selected {
  background-color: #ebf9ff !important;
  position: relative;
}

.td input {
  width: 80%;
  text-align: center;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(165, 165, 165);
}

/* 按钮 */
.btn {
  width: 100%;
  background-color: #4cc46b;
  position: absolute;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  color: #fff;
}

3、js

// pages/test3/index.js
Page({
  data: {
    // 动态表头配置
    tableColumns: [{
        key: 'checked',
        title: '选择',
        width: '80rpx',
        maxWidth: '100rpx'
      },
      {
        key: 'Qty2',
        title: '输入数量',
        width: '150rpx',
        maxWidth: '150rpx',
        editable: true
      },
      {
        key: 'Qty1',
        title: '总数量',
        width: '150rpx',
        maxWidth: '150rpx'
      },
      {
        key: 'code',
        title: '唯一码',
        width: '150rpx',
        maxWidth: '200rpx'
      },
      {
        key: 'name',
        title: '名称',
        width: '180rpx',
        maxWidth: '250rpx'
      },
      {
        key: 'type',
        title: '类型',
        width: '150rpx',
        maxWidth: '300rpx'
      },
    ],
    // 表格数据
    info: [{
        id: 1,
        checked: false,
        code: "111",
        name: "名称1",
        type: "类型1",
        Qty1: 444,
        Qty2: 0,
      },
      {
        id: 2,
        checked: false,
        code: "222",
        name: "名称2",
        type: "类型1",
        Qty1: 497,
        Qty2: 0,
      },
      {
        id: 3,
        checked: false,
        code: "333",
        name: "名称3",
        type: "类型2",
        Qty1: 234,
        Qty2: 0,
      },
      {
        id: 4,
        checked: false,
        code: "444",
        name: "名称4",
        type: "类型1",
        Qty1: 5,
        Qty2: 0,
      }
    ]
  },
  // 复选框选择事件
  handleSelectItem: function (e) {
    const id = e.currentTarget.dataset.id;
    const info = this.data.info.map(item => {
      if (item.id == id) {
        return {
          ...item,
          checked: !item.checked
        };
      }
      return item;
    });
    this.setData({
      info
    });
  },
  // 处理输入框变化
  handleInputChange: function (e) {
    const {
      id,
      key
    } = e.currentTarget.dataset;
    const value = e.detail.value;
    const info = this.data.info.map(item => {
      if (item.id == id) {
        return {
          ...item,
          [key]: value
        };
      }
      return item;
    });
    this.setData({
      info
    });
  },
  // 提交方法 - 获取勾选的数据
  submitCheckedItems: function () {
    const checkedItems = this.data.info.filter(item => item.checked);
    if (checkedItems.length === 0) {
      wx.showToast({
        title: '请至少选择一项',
        icon: 'none'
      });
      return;
    }
    // 这里可以发送到服务器或处理数据
    console.log('提交的数据:', checkedItems);
  }
})

http://www.dtcms.com/a/122247.html

相关文章:

  • TCP重传率高与传输延迟问题
  • 【scikit-learn基础】--『数据加载』之外部数据集
  • pip install pytrec_eval失败的解决方案
  • 自动变为 VIP 文章
  • python基础语法11-文件读写
  • 程序代码篇---时间复杂度空间复杂度
  • 初识Linux:常见指令与权限的理解,以及相关衍生知识
  • Jetpack Compose 状态保存机制全面解析:让UI状态持久化
  • JavaWeb遇到的问题汇总
  • 2025 销售困局:AI 强势入局,传统模式如何突围?
  • 解决 ECharts 图表无数据显示问题
  • 网工毕业设计项目选题推荐
  • Redis Java 客户端 之 SpringDataRedis
  • Diffusion Policy Visuomotor Policy Learning via Action Diffusion官方项目解读(二)(5)
  • HTTPS和HTTP有哪些区别?
  • 虚拟列表react-virtualized使用(npm install react-virtualized)
  • 大模型Prompt提示词越狱相关知识
  • 一种替代DOORS在WORD中进行需求管理的方法 (二)
  • Vue:路由切换表格塌陷
  • SpringBoot 整合 MCP
  • 树莓派非桌面版无法ssh或vnc远程连接问题解决办法
  • 通过HTTP协议实现Git免密操作的解决方案
  • telophoto源码查看记录 三
  • 【回眸】Linux 内核 (十五) 之 多线程编程 上
  • 4月9日笔记
  • 2021-10-26 C++繁忙通信兵
  • Java 设计模式:原型模式详解
  • 使用雪花算法生成分布式唯一ID
  • Android 回答视频边播放边下载的问题
  • GMSL Strapping Pins CFG0/CFG1 应用