vue+element-ui el-checkbox踩坑记录

选中/未选中 状态显示问题

业务逻辑

  画面上的表格，每一行最后面都有一个名为“编辑”的复选框，在需要修改的某条或多条数据后选中复选框，点击“登陆”按钮，就会把需要修改的内容（即选中“编辑”复选框的数据）提交到数据库，然后返回修改成功与否，并刷新表格。

遇到的问题

  选中需要修改的数据 并点击登陆按钮的时候，复选框是选中状态，然后提交请求修改完毕之后，画面刷新，所有的复选框应该呈现未选中状态，然后实际情况为依然显示选中。

排错

  首先在修改成功刷新页面的时候，将画面checkbox的v-model的值设置为了false，editp即为应该显示未选中的checkbox。

masterManage.projectForm.projectList.forEach(project =>{
				if(flag==0){
						project.editp=false;
						project.delp=false;
				}
						project.editFlagp = false;
						project.delDisabledFlagp = false;
						project.editDisabledFlagp = false;
				})

  画面上的确显示为未选中的状态了，但是再次去点击复选框，却不显示呈对号形式的选中状态了，而是仅仅边框变了一下颜色。

 

  问题本质就是，返回数据的时候 把checkbox的v-model设置为了false,但是在点击复选框的方法中，怎么设置也无法让复选框呈现选中状态。

解决办法

在点击复选框的方法中，添加如下代码

this.projectForm.projectList.splice();

projectForm为的:model值，projectList为表格的：{data} 值。

效果类似于把该表格的样式重置一下，这样便不会影响接下来点击复选框的 选中/未选中 的显示问题了。