el-checkbox和el-switch绑定一个Number值

因为我们对状态这种字段,后端一般返回的是Number值。0为正常,1为停用。

el-switch,el-checkbox这种控件呢,一般是绑定布尔值的。原来我的做法是使用value和change事件来做转换,而不是v-model。但是后来发现,el-checkbox对于这种做法并没有效果。

js 复制代码
 <el-switch
    :value="!row.status"
    @change="value => {changeStatus(row, value)}"
  />
  
    // 修改状态
    changeStatus(row, value) {
      console.log(value, row)
      row.status = Number(!value)
    },

后来看文档才发现,是可以使用v-model来绑定Number,String类型的。只需要传入参数,指定他的true值和false值即可。

正确写法

js 复制代码
<el-checkbox v-model="data.status" :true-label="1" :false-label="0">停用</el-checkbox>

<el-switch v-model="data.status" :inactive-value="1" :active-value="0">停用</el-switch >

所以还是要细看文档啊呜呜呜~

相关推荐
Moment16 分钟前
长上下文会最终杀死 Rag 吗?
前端·javascript·后端
kyriewen2 小时前
大文件上传最全指南:分片、断点续传、秒传,一篇就够了
前端·javascript·面试
我叫黑大帅2 小时前
解决聊天页内部滚轮改为页面滚动问题
javascript·后端·面试
新酱爱学习3 小时前
手搓 10 个 Skill 后,我把重复劳动收敛成了一套零依赖 CLI 工具
前端·javascript·人工智能
罗超驿3 小时前
13.JavaScript 新手入门指南:语法、变量、流程控制全解析
开发语言·javascript
ct9783 小时前
Three.js 性能优化(测量-定位-优化)
javascript·性能优化·three
陈_杨4 小时前
鸿蒙开发-疾阅App阅读训练功能技术解析
前端·javascript
不好听6134 小时前
Node.js 工程化开发流程 — 知识点总结
javascript·node.js
ZengLiangYi4 小时前
sql.js WASM 深度解析
javascript·数据库·后端
JustHappy5 小时前
古法编程秘籍(三):为什么需要函数?因为程序员讨厌重复劳动
前端·javascript·后端