element-ui 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 }

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