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

Cejauh 发布于 2020-12-24 1383 次阅读

AI 摘要

在使用Element UI的Switch组件时，有哪些不容忽视的细节？从如何根据后台传来的数字值动态显示开关状态，到实现精确的界面反馈，这篇文章将带你深入解析Switch组件的灵活运用。特别关注active-value与inactive-value的设置技巧，以及如何巧妙地绑定数据，让你的组件在不同状态下游刃有余。无论你是新手还是有经验的开发者，这些使用注意事项都将为你的项目增添光彩！

需求描述

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