【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表示当前列表的序号。
注：改变状态时要注意返回的状态根据状态来选择相应的写法。