业务功能需求是这样的，很简单，一个数据列表el-table，右边有个编辑按钮，实现弹框编辑功能，点击编辑按钮弹框的过程是如下实现的
handleEdit(scope) { this.dialogType='edit'this.dialogVisible=truethis.obj=deepClone(scope.row) this.obj.selectedWeeks= [] if(this.obj.openweeks!=null&&this.obj.openweeks!=''){ this.obj.selectedWeeks=this.obj.openweeks.split(',') } this.obj.opentimeArray=[this.obj.openstarttime,this.obj.openendtime]) this.$nextTick(() => { this.$refs['dataForm'].clearValidate() }) }
首先说明一下，scope.row是el-table中的一行数据，但是其中没有selectedWeeks和opentimeArray两个属性，在执行以上代码中的deepClone(scope.row)这一行时，其实this.obj中时也是没有selectedWeeks和opentimeArray两个属性的，虽然在下面紧接着执行的赋值操作，但是这种方式的赋值虽然页面上有体现，但是并没有让这两个属性与页面产生实时的双向绑定的效果，导致了无法编辑的效果。修改如下修复此问题：
handleEdit(scope) { this.dialogType='edit'this.dialogVisible=truethis.obj=deepClone(scope.row) this.$set(this.obj,'selectedWeeks',[]) if(this.obj.openweeks!=null&&this.obj.openweeks!=''){ this.$set(this.obj,'selectedWeeks',this.obj.openweeks.split(',')) } this.$set(this.obj,'opentimeArray',[this.obj.openstarttime,this.obj.openendtime]) this.$nextTick(() => { this.$refs['dataForm'].clearValidate() }) }
具体可以参考vue官网对this.$set用法的解释，以及对双向绑定中新增属性的要求。（使用的是vue2）
