微信小程序tab切换时保存checkbox状态
直接上代码
javascript
//先处理后端返回的数据
//因为我这里是两层所以要 i.list 一层可以直接循环添加checked
let arr = data.data.data;
arr.forEach(i => {
i.show = false;
i.list.forEach(v => {
v.checked = false
})
})
arr[0].show = true;
this.setData({
list: arr })
//切换函数
bannav(e) {
let navid = e.currentTarget.dataset.id;
this.setData({
navid })
this.getData();
//主要是这里
//获取选中的id 和 已有的数据进行比较 然后 将checkd 重新赋值
setTimeout(() => {
this.data.list.forEach(i => {
i.list.forEach(v => {
this.data.selectIds.forEach(t => {
if (v.id == t) {
v.checked = true;
}
})
})
})
this.setData({
list: this.data.list })
}, 500)
},
//复选框选中状态
checkboxChange(e) {
let bigindex = e.target.dataset.bigindex;
let smallIndex = e.target.dataset.smallindex;
const items = this.data.list[bigindex].list;
const values = e.detail.value;
let carr = this.data.selectIds
//选中
if (values.length) {
let cid = items.findIndex(v => v.id == values[0]);
let T = `list[${
bigindex}].list[${
cid}].checked`;
this.setData({
[T]: !this.data.list[bigindex].list[smallIndex].checked
})
carr.push(...values)
this.setData({
selectIds: carr })
} else {
//取消选中
let T = `list[${
bigindex}].list[${
smallIndex}].checked`;
this.setData({
[T]: false
})
let ids = [this.data.list[bigindex].list[smallIndex].id.toString()]
let lists = carr.filter(items => {
if (!ids.includes(items)) return items
})
this.setData({
selectIds: lists })
}
},
html
//第一层
<view class="list" wx:for="{
{list}}" wx:key="index">
<view class="list-title" bindtap="go_view" data-name="{
{item.name}}">
<view>{
{
item.name}}</view>
<image src="../../images/down.png"></image>
</view>
<block wx:if="{
{item.show}}">
//第二层
<view class="list-item" wx:for="{
{item.list}}" wx:key="index" wx:for-index="childindex">
<checkbox-group data-bigindex="{
{index}}" data-smallIndex="{
{childindex}}" bindchange="checkboxChange" style="display: flex;">
<label class="checkbox">
<checkbox value="{
{item.id}}" checked="{
{item.checked}}" />
</label>
<view class="checkbox-items">{
{
item.content}}</view>
</checkbox-group>
</view>
</block>
</view>