一、表格效果
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
});
}
})