我转过几个弯 绕过那个小雨楼
- 拿着蒲扇摆着衣衫渡着紧箍咒
- 不问天涯不停留 喝过几壶酒
- 不过年少白头道义放胸口
- 倘若明天之后 遥看前尘剑封侯
- 似那天上神仙无所求
- 朝朝暮暮君如梦醒十分不为何理由
- 是真是假是惶恐是无休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 又过了几个弯 算尽天量道莫慌
- 踏这田园闻这芳草香
- 跌跌撞撞仗剑天涯折煞不枉无笔良
- 是梦是幻是温柔是家乡
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 谁能与我一醉方休
关于element的checkbox组件 v-modal绑定的不是一个布尔值的问题
木灵鱼儿
115 天前vue 项目实战
293
0
0
通过api获取的数据，往往不一定是布尔值，在后端存放的数据中，大部分是都是0和1，但是饿了么的 Checkbox 多选框 组件，v-modal绑定的，虽然他文档上显示可以是string，number，但是实际上v-modal只能布尔值。
他还有一个属性checked，checked可以使用三元判断
<el-checkbox :checked="status===1"></el-checkbox>但是，他有一个致命的缺陷，如果数据源更新了数据，他不会动态变化，可能是因为我把他丢在的table组件里面的原因，如果想让他变化，只能手动点击，或者重新渲染。
总结一下：
但值不为布尔值时，v-modal无法使用，checked原生属性能用，但是并不好用。
那么有什么方式更为方便呢？
解决方案
- 数据源0和1进行布尔转换
- 使用value绑定
数据源0和1进行布尔转换
这是比较简单的直白方式，相对也会比较繁琐，就是在数据获取后进行一个布尔值转换，当数据修改后，也进行一次数据转换。
最直白的流程就是使用中间件：
源数据
|转换后的数据
|双向绑定
使用这种方式需要监听源数据变化，也要监听转换后数据被双向绑定改动的变化。总体来说能行，但是不方便。
使用value绑定
value绑定就比较自由了，value只做视觉效果绑定，数据变化我们通过事件来处理。
<el-checkbox :value="row.status===1" @change="onChange(!row.status,$index)"></el-checkbox>value进行一个全等判断，绑定一个change事件，传入两个参数，这个参数就根据自己需要了，因为我的数据是有很多的，所以需要下标index，第一个参数就是变化后的值。
onChange会将源数据复制一份，然后修改，最后将源数据替换成这个修改后的数据。
原理就是这样，具体方法就不多写了，自行根据项目调整，我这也是思路分享。
0
评论(0)