设计感十足的网站福田庆三鞠婧祎

一、表格效果

1、实现功能

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

2、图片效果

 

二、代码

1、wxml

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

<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

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

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

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

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});}
})