案例描述:列表页-可勾选项目(包括全选、全不选)进行操作

问题描述:全选、全不选切换无问题,勾选部分项目-刷新列表(重新请求列表接口即重新渲染列表,不是刷新网页)之后-上次已勾选的项目仍展示勾选样式

解决:刷新列表之后触发勾选初始化操作(写在定时器内)

解决原因:猜测应该是页面渲染先后问题,初始化操作设定一段时间后(页面完全渲染之后)进行

代码示例:主要涉及代码段

<checkbox-group @change="checkboxChange">
    <view v-for="(item, index) in copyWorkOrderList" :key="index">
		<view class="gd-list-title">
			<checkbox class="gd-list-checkbox" color="#fff" :value="item.WorkOrderID" :checked="checkedStatusList[index]" @click="checkBtn(index)"></checkbox>
        </view>
	</view>
</checkbox-group>
<view class="gd-list-btn">
	<button size="mini" @click="checkedAll">{{checked?'全不选':'全选'}}</button>
</view>
/**
checkedList:选中值数组
checked:是否全选
checkedStatusList:数组-存储列表中每一项的checked值
copyWorkOrderList:列表数组
**/

// checkChange事件-获取选中值
checkboxChange(e) {
    this.checkedList = e.detail.value
	if(this.checkedList.length < this.copyWorkOrderList.length) {
		this.checked = false
	} else {
		this.checked = true
	}
},
// 全选
checkedAll() {
	this.checkedList = []
	let items = this.copyWorkOrderList
	if (!this.checked) {
		for(let i=0; i<items.length; i++) {
			this.checkedList.push(items[i].WorkOrderID)
		}
	}
	this.checked = !this.checked
	this.refreshChecked()
},
// 重置列表多选栏
refreshChecked(list) {
	if(list) {
		this.checkedStatusList = []
	} else {
		list = this.checkedStatusList
	}
	for(let i in list) {
		this.checkedStatusList[i] = this.checked
	}
},
// 选中/勾选事件	
checkBtn(index) {
	this.checkedStatusList[index] = !this.checkedStatusList[index]
}
// 本项目中采用监听列表数组变化触发勾选初始化,根据各项目需要,不一定使用watch监听,重点定时器
// 这里的定时时间不敢设置太长,可以根据项目需要设置
watch: {
	copyWorkOrderList: {
		handler(newVal) {
			setTimeout(() => {
				this.checked = false
				this.refreshChecked(newVal)
				this.checkedList = []
			}, 100)
		},
		immediate: true,
		deep: true
	}
}

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐