el-table中嵌入el-switch，开关中嵌入文字

最新推荐文章于 2025-01-02 17:07:52 发布

原创最新推荐文章于 2025-01-02 17:07:52 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍如何在Vue.js的el-table组件中嵌入el-switch开关，并在开关内显示文字，通过实例展示具体实现过程。

先来样式截图
在这里插入图片描述

// 模板
<el-table :data="tableList" >
	
	<el-table-column label="灯" width="50" align="center">
	  <template slot-scope="scope">
	    <el-switch class="switchStyle" v-model="scope.row.isGreen" active-text="绿" inactive-text="红"
	               active-color="#13ce66" inactive-color="#ff4949"></el-switch>
	  </template>
	</el-table-column>
	
</el-table>


// data 数据
tableList: [
  {
  
    isGreen: false,
    
  }
]

// 样式
/deep/.el-switch__core{
   width: 55px!important;
}
/deep/.switchStyle > .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/deep/.switchStyle > .el-switch__label--left {
  z-index: 9;
  right: -3px;
}
/deep/.switchStyle > .el-switch__label--right {
  z-index: 9;
  left: -3px;
}
/deep/.switchStyle > .el-switch__label.is-active {
  display: block;
}