vue element Switch 开关

最新推荐文章于 2024-09-12 14:10:59 发布

爬坑的小白

最新推荐文章于 2024-09-12 14:10:59 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/ZJ15981837003/article/details/105726689

版权

这里是element-ui 官网给你的实例,但是value 是使用的Boolean类型的变量，但是实际项目中会有很多使的是string或者为number类型
1：value 为Boolean 类型

<el-switch
  v-model="value"
  active-text="否"
  inactive-text="是"
  active-color="#13ce66"
  inactive-color="#ff4949"
  @change="changeSwitch(scope.row)"
>
</el-switch>

2:value 为string类型 active-value,inactive-value设置为需要的string

<el-switch
  v-model="value"
  active-text="否"
  inactive-text="是"
  active-value="true"
  inactive-value="false"
  active-color="#13ce66"
  inactive-color="#ff4949"
   @change="changeSwitch(scope.row)"
  >
</el-switch>

3:value 为number类型,这里关键在于前面的 ‘：’符号 :active-value=“0” :inactive-value=“1”

<el-switch v-model="scope.row.is_halt"
                           :active-value="0"
                           :inactive-value="1"
                           active-text="否"
                           inactive-text="是"
                           active-color="#13ce66"
                           inactive-color="#ff4949"
                           @change="changeSwitch(scope.row)"
                >
               </el-switch>

//开关事件
changeSwitch(value){
 console.log(value);//这里value  为当前行的数据
},