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