我是靠谱客的博主 失眠嚓茶,这篇文章主要介绍element switch开关文字显示,现在分享给大家,希望可以做个参考。

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 }

复制代码

好了,这样就设置完成,效果如图所示:

 

 

最后

以上就是失眠嚓茶最近收集整理的关于element switch开关文字显示的全部内容,更多相关element内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(43)

评论列表共有 0 条评论

立即
投稿
返回
顶部