• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

关于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会将源数据复制一份,然后修改,最后将源数据替换成这个修改后的数据。

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

0
  • 本文分类:vue 项目实战
  • 本文标签:vueelementcheckboxv-modal布尔值
  • 流行热度:已超过 293 人围观了本文
  • 最后更新:2021年01月20日 - 10时47分50秒
  • 发布日期:2021年01月20日 - 10时47分50秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码