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 >

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

相关推荐
SuperEugene18 分钟前
后台权限与菜单渲染:基于路由和后端返回的几种实现方式
前端·javascript·vue.js
csdn飘逸飘逸21 分钟前
Autojs基础-全局函数与变量(globals)
javascript
KKKK30 分钟前
手写Promise,从测试用例的角度理解
javascript
青青家的小灰灰31 分钟前
迈向全栈新时代:SSR/SSG 原理、Next.js 架构与 React Server Components (RSC) 实战
前端·javascript·react.js
SuperEugene31 分钟前
弹窗与抽屉组件封装:如何做一个全局可控的 Dialog 服务
前端·javascript·vue.js
青青家的小灰灰32 分钟前
透视 React 内核:Diff 算法、合成事件与并发特性的深度解析
前端·javascript·react.js
北冥有鱼33 分钟前
JSON或代码对比的工具-vue
vue.js
SuperEugene34 分钟前
组合式函数 、 Hooks(Vue2 mixin 、 Vue3 composables)的实战封装
前端·javascript·vue.js
wuhen_n1 小时前
模板编译三阶段:parse-transform-generate
前端·javascript·vue.js
滕青山1 小时前
正则表达式测试 在线工具核心JS实现
前端·javascript·vue.js