【Vue进阶】element ui中switch组件使用注意事项

共计 466 个字符，预计需要花费 2 分钟才能阅读完成。

需求描述

1、根据后台传值动态显示开关状态及文字说明（0 为文字，1 为图标）

实现方法

Swich 默认是 boolean 类型，而后台传值为 number 类型，这个时候我们需要用 number 来取代 boolean 类型；

<template #default="{row}">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
</template>

需要注意的是，必须在 active-value 和 inactive-value 前面加冒号，因为不加冒号是 string 加了冒号才是 number，基础知识、

我们使用绑定的方式，同时 @change 可以传值 $event 就是 switch 的当条信息值，或者直接获取绑定的 model 值 state，scope.row为参数，还可以再添加 index 表示当前列表的序号。
注：改变状态时要注意返回的状态根据状态来选择相应的写法。