el-table和el-switch结合使用无法切换问题解决
因为学习需要,所以在使用vue的时候借用element-ui的组件,在使用组件element-table和element-switch两则相互结合后,出现了点击switch触发了change方法,值也确实发生了改变。但效果没有发生变化。首先是问题发生的原因:我实现的change方法如下:change(state){this.dat...
因为学习需要,所以在使用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的理解不够深入。
不过,能够解决就可以了。
更多推荐
所有评论(0)