由element-ui的switch扩展的value类型引发的vue中标签值的数值与字符串问题

本文链接：https://blog.csdn.net/dannil00/article/details/125305024

本文介绍了Element UI中的Switch组件，详细解析了其参数配置，包括value/v-model、disabled、width等，并着重讨论了active-value和inactive-value在处理number类型时遇到的问题。当数据库状态为0和1时，由于初始值类型转换错误导致开关未按预期显示。通过使用v-bind将active-value和inactive-value绑定为number类型，成功解决了这个问题，实现了预期的开关效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用element-ui的switch开关时，查阅到其中有支持如下的参数：

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
disabled	是否禁用	boolean	—	false
width	switch 的宽度（像素）	number	—	40
active-icon-class	switch 打开时所显示图标的类名，设置此项会忽略 `active-text`	string	—	—
inactive-icon-class	switch 关闭时所显示图标的类名，设置此项会忽略 `inactive-text`	string	—	—
active-text	switch 打开时的文字描述	string	—	—
inactive-text	switch 关闭时的文字描述	string	—	—
active-value	switch 打开时的值	boolean / string / number	—	true
inactive-value	switch 关闭时的值	boolean / string / number	—	false
active-color	switch 打开时的背景色	string	—	#409EFF
inactive-color	switch 关闭时的背景色	string	—	#C0CCDA
name	switch 对应的 name 属性	string	—	—
validate-event	改变 switch 状态时是否触发表单的校验	boolean	-	true

其中active-value和inactive-value支持boolean、string、number，于是打算用这个属性来做默认打开效果，数据库中定义的状态为 0：关闭，1：打开。

页面上是这样的：

<el-switch
  v-model="scope.row.status"
  active-value="1"
  inactive-value="0"
  @change="handleChange(1, scope.row)"
></el-switch>

数据库中status的值为1（number），这样没有看到我想要的效果，都是关闭状态。

经过一顿测试，发现这样写，作为标签值的时候，值一直是string，导致不等，所以就一直是关闭状态，就是active-value="1"，这里的1是string，那么要怎么才能使1变成number呢？很简单，我们立刻想到vue的v-bind，v-bind后面是表达式，会计算表达式的值，所以我们只需要把active-value="1"标签改为vue的数据绑定即可，即改为:active-value="1"，这样1就是number了。

改成下面这样，完美实现效果。

<el-switch
  v-model="scope.row.courseHot"
  :active-value="1"
  :inactive-value="0"
  @change="handleChange(1, scope.row)"
></el-switch>