微信小程序：实现多功能表格效果，例如滚动效果、宽度自定义、多选、行内编辑等功能

雯0609~2025-03-14 11:05

一、表格效果

1、实现功能

表格实现可横向水平滚动表格、宽度自定义、文本编辑、数字加减、多选，行选中效果，获取选中行数据等功能

2、图片效果

二、代码

1、wxml

根据头循环将表格头进行循环，再通过昂循环展示行内的全部信息，根据数组width索引，去调整每一行的宽度，根据三目运算实现行的选中效果

html 复制代码 
<view class="main">
  <view class="table">
    <scroll-view class="scroll" scroll-y scroll-x>
      <view class="header">
        <view class="header_item" wx:for="{{header}}" wx:key="index" style="width: {{width[index]}};">
          {{item}}
        </view>
      </view>
      <view class="content">
        <view class="content_line {{dataItem.checked ? 'selected-row' : ''}}" wx:for="{{list}}" wx:key="index" wx:for-item="dataItem">
          <view class="content_item" style="width: {{width[0]}};">
            <checkbox checked="{{dataItem.checked}}" bindtap="handleCheckboxChange" data-index="{{index}}" />
          </view>
          <view class="content_item" style="width: {{width[1]}};">{{dataItem.date}}</view>
          <view class="content_item" style="width: {{width[2]}};">{{dataItem.number}}</view>
          <view class="content_item" style="width: {{width[3]}};">
            <input type="text" value="{{dataItem.person}}" bindinput="handlePersonInput" data-index="{{index}}" class="input-text" />
          </view>
          <view class="content_item" style="width: {{width[4]}};">{{dataItem.item_no}}</view>
          <view class="content_item" style="width: {{width[5]}};">{{dataItem.item_name}}</view>
          <view class="content_item" style="width: {{width[6]}};">{{dataItem.sub_loc}}</view>
          <view class="content_item" style="width: {{width[7]}};">{{dataItem.wait_qty}}</view>
          <view class="content_item" style="width: {{width[8]}}; ">
            <view class="btn" bindtap="handleNowQtySubtract" data-index="{{index}}">-</view>
            <input type="number" value="{{dataItem.now_qty}}" bindinput="handleNowQtyInput" data-index="{{index}}" class="input-number" />
            <view class="btn" bindtap="handleNowQtyAdd" data-index="{{index}}">+</view>
          </view>
          <view class="content_item" style="width: {{width[9]}};">
            <view class="btn" bindtap="handleRejectQtySubtract" data-index="{{index}}">-</view>
            <input type="number" value="{{dataItem.reject_qty}}" bindinput="handleRejectQtyInput" data-index="{{index}}" class="input-number" />
            <view class="btn" bindtap="handleRejectQtyAdd" data-index="{{index}}">+</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <view class="footer">
    <button bindtap="getSelectedData">获取选中的数据</button>
  </view>
</view>

2、wxss

css 复制代码 
page {
  background-color: #f8f8f8;
}

.table {
  width: 100%;
}

.input-text {
  border-bottom: 1px solid #4eade4;
  text-align: center;
}

/* 多选框样式 */
checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 按钮样式 */
.footer {
  margin-top: 20px;
  text-align: center;
}

button {
  width: 200px;
  background-color: #4bb6e7;
  color: white;
  border-radius: 5px;
}

.scroll {
  overflow: hidden;
  background: white;
  width: 100%;
}

.header {
  display: grid;
  grid-auto-flow: column;
  font-size: 26rpx;
  font-weight: bold;
  color: #292929;
}

.header_item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #80d3f8;
  width: 150rpx;
  height: 60rpx;
  border: 1rpx solid #98a5ab;
  border-left: 0;
  border-top: 0;
}

.content {
  background-color: #fff;
}

.content_line {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  border-bottom: 1px solid #eee;
}
/* 选中行样式 */
.content_line.selected-row {
  background-color: #d7edff;
  border-radius: 5px;
}
.content_item {
  width: 150rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx solid #98a5ab;
  border-left: 0;
  border-top: 0;
  font-size: 85%;
  word-break: break-all;
}

.header_item:nth-child(1),
.content_item:nth-child(1) {
  border-left: 1rpx solid #98a5ab;
}

.input-number {
  width: 35px;
  text-align: center;
}

.btn {
  width: 25px;
  height: 20px;
  margin: 0 2px;
  padding: 0;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  background-color: rgb(96, 178, 226);
}

3、js

首先定义变量：头、宽度、行数据

处理多选功能、多选选中数据获取功能、文本输入功能、加减功能等

javascript 复制代码 
Page({
  data: {
    header: ['选择','日期', '单号', '人员', '料号', '名称', '储位', '待发', '本次发', '拒绝'],
    width: ['50px','50px', '100px', '50px', '100px', '100px', '50px', '50px', '100px', '100px'],
    list: [{
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
      {
        date: '03-02',
        number: 'SL002401',
        person: '张三',
        item_no: '3019473',
        item_name: '螺丝',
        sub_loc: 'A1',
        wait_qty: 10,
        now_qty: 0,
        reject_qty: 0,
      },
    ]
  },
  //多选框
  // 处理多选框点击事件
  handleCheckboxChange(e) {
    const { index } = e.currentTarget.dataset;
    const list = this.data.list.map((item, i) => {
      if (i === index) {
        return {
          ...item,
          checked: !item.checked, // 切换选中状态
        };
      }
      return item;
    });
    this.setData({ list });
  },

  // 获取选中的数据
  getSelectedData() {
    const selectedData = this.data.list.filter(item => item.checked);
    console.log('选中的数据:', selectedData);
    return selectedData;
  },
  // 处理"人员"输入框输入事件
  handlePersonInput(e) {
    const { index } = e.currentTarget.dataset;
    const value = e.detail.value;
    this.updateItem(index, 'person', value);
  },

  // 处理"本次发"输入框输入事件
  handleNowQtyInput(e) {
    const { index } = e.currentTarget.dataset;
    const value = e.detail.value;
    this.updateItem(index, 'now_qty', parseInt(value, 10));
  },

  // 处理"本次发"增加按钮点击事件
  handleNowQtyAdd(e) {
    const { index } = e.currentTarget.dataset;
    const item = this.data.list[index];
    this.updateItem(index, 'now_qty', item.now_qty + 1);
  },

  // 处理"本次发"减少按钮点击事件
  handleNowQtySubtract(e) {
    const { index } = e.currentTarget.dataset;
    const item = this.data.list[index];
    this.updateItem(index, 'now_qty', Math.max(item.now_qty - 1, 0)); // 最小值为 0
  },

  // 处理"拒绝"输入框输入事件
  handleRejectQtyInput(e) {
    const { index } = e.currentTarget.dataset;
    const value = e.detail.value;
    this.updateItem(index, 'reject_qty', parseInt(value, 10));
  },

  // 处理"拒绝"增加按钮点击事件
  handleRejectQtyAdd(e) {
    const { index } = e.currentTarget.dataset;
    const item = this.data.list[index];
    this.updateItem(index, 'reject_qty', item.reject_qty + 1);
  },

  // 处理"拒绝"减少按钮点击事件
  handleRejectQtySubtract(e) {
    const { index } = e.currentTarget.dataset;
    const item = this.data.list[index];
    this.updateItem(index, 'reject_qty', Math.max(item.reject_qty - 1, 0)); // 最小值为 0
  },

  // 更新数据的方法
  updateItem(index, key, value) {
    const list = this.data.list.map((item, i) => {
      if (i === index) {
        return {
          ...item,
          [key]: value
        };
      }
      return item;
    });
    this.setData({
      list
    });
  }
})
相关推荐
说私域6 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往6 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw6 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld9 小时前
淘宝扭蛋机小程序系统开发：重塑电商互动模式
大数据·小程序
996幸存者11 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮12 小时前
Uniapp编写微信小程序，绘制动态圆环进度条
微信小程序·小程序·uni-app
The_era_achievs_hero19 小时前
UniappDay03
vue.js·微信小程序·uni-app
说私域1 天前
技术赋能与营销创新：开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者81 天前
没有 Mac，如何上架 iOS App？多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld2 天前
代驾小程序系统开发：引领出行行业数字化转型
小程序
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03vue数据变化但页面不变04KGG转MP3工具|非KGM文件|解密音频05sqli-labs 靶场 less-8、9、10 第八关到第十关详解：布尔注入，时间注入06扣子开源本地部署教程 丨Coze智能体小白喂饭级指南07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！08【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致09ChatGPT Agent 完全使用指南：2025年7月最新功能详解10《魔兽世界》提示lua警告的含义及解决方法