el-table和el-switch结合使用无法切换问题解决

 因为学习需要，所以在使用vue的时候借用element-ui的组件，在使用组件element-table和element-switch两则相互结合后，出现了点击switch触发了change方法，值也确实发生了改变。

       但效果没有发生变化。

       首先是问题发生的原因：

       我实现的change方法如下：

change(state){
  this.datas[1].State=false;
  console.log(state);
},

直接打印当前值。

 

界面效果如下图：

也就是说v-model绑定的结果一直为true，因为是使用table，所以绑定值的代码如下：

<el-table-column
  label="账号状态"
  width="140">
  <template slot-scope="scope" >
  <el-switch
    style="display: block;"
    v-model="scope.row.State"
    @change="change(scope.row.State)"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-text="启用"
    inactive-text="禁用">
  </el-switch>
</template>
</el-table-column>

       多次点击图标，显示结果如下。

通过在浏览器上面点击操作可以看见，也就是说虽然触发了change，change也把值的结果变了，但是始终展现的为true,同时改变的值不为v-model绑定的值。

 

因此，我决定同时打印table绑定的data和scope的state,观察两个结果是否有差异，运行结果如下：

结果一致，两则指向的值一样，但switch效果未发送变化，但是switch一次改变了相应的值。但是界面没有表示，首先需要确认是否table能够让switch失效，因此我让v-model绑定一个自定义值的数组。

test:[{'value':false}],

 

如上设置，并绑定到v-model.

点击后：

确实是发送了变化，因此可以证明switch能够正常工作。我将结果绑定为指定index的值。因此，可以判断是table的值未进行更新，我发现当改变

<el-table-column
  prop="sex_sta"
  label="性别"
>

如上所示el-table-column的值时，它的表格会动态刷新。

然后经过多次练习我发现规律如下：

this.datas=response.data.data;
this.datas.forEach(element=>{
  element.State=element.state!==0;
  element.user_state=element.state===0?'禁用':'启用';
  element.sex_sta=element.sex===0?'女':'男';
});

当你在对datas的某个变量赋值后再更改，如上两次以上修改在一个方法里面。在表格上会显示最后一次的值，但是第三次修改该变量的值时，系统无法检测表格的值是否发生变化。默认没有发生变化，因此针对上述情况，先将值修改完后再进行赋值操作，同时将switch组件所在的el-table-column的prop绑定具体的值，只有这样，才能检测到表格是否被修改。

总结，el-table通过绑定prop值检测表单内容的修改，同时在一个方法进行多次对表单值的修改会导致【即多次对所绑定的变量进行赋值】默认该变量没有被修改。

不清楚这个到底是bug还是我对el-table的理解不够深入。

不过，能够解决就可以了。