el-switch 自定义样式

最新推荐文章于 2025-04-22 13:19:14 发布

一个没有理想的程序猿

最新推荐文章于 2025-04-22 13:19:14 发布

阅读量3.6k

点赞数

分类专栏： element-ui

本文链接：https://blog.youkuaiyun.com/weixin_43925947/article/details/105857380

版权

本文将详细介绍如何在项目中对Element UI的el-switch组件进行自定义样式设置，以达到特定的视觉效果，包括颜色、大小、边框等细节调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：在这里插入图片描述

 <el-table-column fixed="right" label="审核" align="center" v-if="isShowdetails">
          <template slot-scope="scope">
            <el-switch class="switchStyle" 
            v-model="scope.row.approveResult"  
            active-text="通过"
            active-color="#13ce66" 
            inactive-color="#ff4949" 
            inactive-text="驳回" 
            :active-value="1"
            :inactive-value="0"
            @change="adoptBtn(scope.$index,examineTable,scope.row.approveResult)"></el-switch>
          </template>
        </el-table-col