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 >

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

相关推荐
lqj_本人4 分钟前
DevUI高频组件(Form 组件)深度用法与避坑指南
前端·javascript
live丶6 分钟前
从零实现一个低代码 H5 页面编辑器(Vue3 + 拖拽)
前端·vue.js
码界奇点14 分钟前
基于Django REST framework与Vue的前后端分离后台管理系统设计与实现
vue.js·后端·python·django·毕业设计·源代码管理
茄汁面30 分钟前
实现紧贴边框的高亮流光动画效果(长方形适配)
前端·javascript·css
松莫莫30 分钟前
Vue 3 项目搭建完整流程(Windows 版 · 避坑指南)
前端·vue.js·windows
涔溪31 分钟前
深入理解 Vue Router 中 Hash 模式和 History 模式 的核心区别、底层原理、使用场景及部署注意事项
vue.js·哈希算法·history
San3034 分钟前
破茧成蝶:Web 前端开发的三次革命与架构演进史
javascript·vue.js·ecmascript 6
性野喜悲42 分钟前
<script setup lang=“ts“>+element-plus模拟required 展示星号*且不触发 Element UI 的校验规则
javascript·vue.js·elementui
GIS好难学1 小时前
2025年华中农业大学暑期实训优秀作品(5):智慧煤仓监控系统平台——重塑煤炭仓储管理新模式
前端·vue.js·信息可视化·gis开发·webgis
pixle01 小时前
从零学习Node.js框架Koa 【七】Koa实战:构建企业级邮箱验证注册系统
javascript·学习·node.js·koa·注册·全栈·邮箱注册