element switch开关文字显示

小鱼儿 2023-10-10 09:40 15阅读 0赞

**element switch开关文字显示**

element中switch开关把on-text 和 off-text 属性改为 active-text 和 inactive-text 属性.怎么把文字描述显示在开关上?下面就是实现方法:

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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>

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

switch开关应用在表格中,效果图:

![format_png][]

下面设置样式,改变开关文字描述位置(位置大小根据需要可以自行调整):

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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 }

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![format_png 1][]

[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTU2NjE2My8yMDE4MTIvMTU2NjE2My0yMDE4MTIyMTE2NDkxNTk4Ny0xMDE2Nzc1NDkyLnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTU2NjE2My8yMDE4MTIvMTU2NjE2My0yMDE4MTIyMTE2NTIxNTIwNC0xMDUzNzQ4NjI3LnBuZw?x-oss-process=image/format,png