element-ui switch開關打開和關閉時的文字設置樣式

element switch開關文字顯示

element中switch開關把on-text 和 off-text 屬性改為 active-text 和 inactive-text 屬性.怎么把文字描述顯示在開關上?下面就是實現方法:

<el-table-column label="狀態">
  <template slot-scope="scope">
    <el-switch
      v-model="scope.row.flag"
      class="demo"
      active-color="#00A854"
      active-text="正常"
      active-value="00000000"
      inactive-color="#F04134"
      inactive-text="默認"
      inactive-value="10000000"/>
  </template>
</el-table-column>

switch開關應用在表格中,效果圖:

 

下面設置樣式,改變開關文字描述位置(位置大小根據需要可以自行調整):

<style>
.demo .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打開時文字位置設置*/
.demo .el-switch__label--right {
  z-index: 1;
  right: -3px;
}
/*關閉時文字位置設置*/
.demo .el-switch__label--left {
  z-index: 1;
  left: 19px;
}
/*顯示文字*/
.demo .el-switch__label.is-active {
  display: block;
}
.demo.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}

好了,這樣就設置完成,效果如圖所示: