<van-cell-group> <van-cell use-label-slot wx:for="{{tableData}}" wx:for-item="item" wx:for-index="index"> <van-switch size="50rpx" checked="{{index}}" bind:change="onChange" /> <view class="my-title" slot="title"> <view class="name">{{item.prstStaffName}}</view> <view class="time">{{item.prstCheckInTime==null?'':item.prstCheckInTime}}</view> </view> <view class="my-label" slot="label"> <view>{{item.prstPostStaff==1?"项目经理":"项目组长"}}</view> </view> </van-cell> </van-cell-group这段代码开关如何单独控制
时间: 2024-01-03 16:10:04 浏览: 256
可以给每个开关绑定一个对应的变量,然后在`onChange`事件中更新这个变量的值。例如:
```html
<van-cell-group>
<van-cell use-label-slot wx:for="{{tableData}}" wx:for-item="item" wx:for-index="index">
<van-switch size="50rpx" checked="{{item.checked}}" bind:change="onChange({{index}})" />
<view class="my-title" slot="title">
<view class="name">{{item.prstStaffName}}</view>
<view class="time">{{item.prstCheckInTime==null?'':item.prstCheckInTime}}</view>
</view>
<view class="my-label" slot="label">
<view>{{item.prstPostStaff==1?"项目经理":"项目组长"}}</view>
</view>
</van-cell>
</van-cell-group>
```
在JS代码中,需要定义`tableData`数组,并给每个元素添加一个`checked`属性:
```javascript
Page({
data: {
tableData: [
{prstStaffName: '张三', prstCheckInTime: null, prstPostStaff: 1, checked: false},
{prstStaffName: '李四', prstCheckInTime: '2022-01-01', prstPostStaff: 2, checked: false},
{prstStaffName: '王五', prstCheckInTime: '2022-01-02', prstPostStaff: 2, checked: false},
],
},
onChange(event) {
const index = event.currentTarget.dataset.index;
const tableData = this.data.tableData;
tableData[index].checked = !tableData[index].checked;
this.setData({tableData});
},
});
```
在`onChange`事件中,先通过`event.currentTarget.dataset.index`获取当前开关对应的`tableData`数组的下标,然后根据这个下标更新对应元素的`checked`属性,最后通过`this.setData()`方法更新页面数据。这样每个开关就可以单独控制了。
阅读全文