element switch开关文字显示
element中switch开关把on-text 和 off-text 属性改为 active-text 和 inactive-text 属性.怎么把文字描述显示在开关上?下面就是实现方法:
1 <el-table-column label="状态"> 2 <template slot-scope="scope"> 3 <el-switch 4 v-model="scope.row.flag" 5 class="demo" 6 active-color="#00A854" 7 active-text="正常" 8 active-value="00000000" 9 inactive-color="#F04134" 10 inactive-text="默认" 11 inactive-value="10000000"/> 12 </template> 13 </el-table-column>
switch开关应用在表格中,效果图:
下面设置样式,改变开关文字描述位置(位置大小根据需要可以自行调整):
1 <style> 2 .demo .el-switch__label { 3 position: absolute; 4 display: none; 5 color: #fff; 6 } 7 /*打开时文字位置设置*/ 8 .demo .el-switch__label--right { 9 z-index: 1; 10 right: -3px; 11 } 12 /*关闭时文字位置设置*/ 13 .demo .el-switch__label--left { 14 z-index: 1; 15 left: 19px; 16 } 17 /*显示文字*/ 18 .demo .el-switch__label.is-active { 19 display: block; 20 } 21 .demo.el-switch .el-switch__core, 22 .el-switch .el-switch__label { 23 width: 50px !important; 24 }
好了,这样就设置完成,效果如图所示:
