关于element的checkbox组件 v-modal绑定的不是一个布尔值的问题

通过api获取的数据，往往不一定是布尔值，在后端存放的数据中，大部分是都是0和1，但是饿了么的 Checkbox 多选框 组件，v-modal绑定的，虽然他文档上显示可以是string，number，但是实际上v-modal只能布尔值。

他还有一个属性checked，checked可以使用三元判断

<el-checkbox :checked="status===1"></el-checkbox>

但是，他有一个致命的缺陷，如果数据源更新了数据，他不会动态变化，可能是因为我把他丢在的table组件里面的原因，如果想让他变化，只能手动点击，或者重新渲染。

总结一下：

但值不为布尔值时，v-modal无法使用，checked原生属性能用，但是并不好用。

那么有什么方式更为方便呢？

解决方案

1. 数据源0和1进行布尔转换
2. 使用value绑定

数据源0和1进行布尔转换

这是比较简单的直白方式，相对也会比较繁琐，就是在数据获取后进行一个布尔值转换，当数据修改后，也进行一次数据转换。

最直白的流程就是使用中间件：

源数据

|

转换后的数据

|

双向绑定

使用这种方式需要监听源数据变化，也要监听转换后数据被双向绑定改动的变化。总体来说能行，但是不方便。

使用value绑定

value绑定就比较自由了，value只做视觉效果绑定，数据变化我们通过事件来处理。

<el-checkbox :value="row.status===1" @change="onChange(!row.status,$index)"></el-checkbox>

value进行一个全等判断，绑定一个change事件，传入两个参数，这个参数就根据自己需要了，因为我的数据是有很多的，所以需要下标index，第一个参数就是变化后的值。

onChange会将源数据复制一份，然后修改，最后将源数据替换成这个修改后的数据。

原理就是这样，具体方法就不多写了，自行根据项目调整，我这也是思路分享。