Element UI中swich(开关)在表格中的使用

2,060 阅读1分钟

需求说明

  1. 根据后台传值动态显示开关(0为关,1为开)
  2. 对开关进行操作时请求后台,需要传两个参数:ID,Status

问题描述

  1. Swich默认是boolean类型,而后台传值 为number类型
  2. Swich的chang方法中只有一个回调参数

解决方法

1.自定义

<el-switch v-model="status"
   active-value="1"
     inactive-value="0">
</el-switch>

请注意以面的写法,active-valueinactive-value的值分别是字符串的10,如果你赋值为数字类型的 1 或 0是无法正常工作的,若赋值为数值类型,需这样写:

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

2.下面代码中的$event就是switch的当前状态值,而status就是自定义的参数

<el-switch v-model="status"
   :active-value="1"
     :inactive-value="0"
   @chang=chang($event,status)>
</el-switch>

参考文献

ElementUI中switch回调函数change的参数问题 element ui 表格里添加动态的开关 如何实现?