一、樣式效果?

二、代碼

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