清哥的小屋

1
html
2
<el-table-column label="是否显示">
3
  <template v-slot="scope">
4
    <el-switch
5
      v-model="scope.row.show"
6
      class="switchStyle"
7
      :active-value="1"
8
      :inactive-value="0"
9
      active-text="开"
10
      inactive-text="关"
11
      active-color="#13ce66"
12
      inactive-color="#ff4949"
13
      @change="getBrandList(scope.row.id)"
14
    >
15
    </el-switch>
16
  </template>

1
<style lang="less">
2
.switchStyle .el-switch__label {
3
  position: absolute;
4
  display: none;
5
  color: #fff;
6
}
7
.switchStyle .el-switch__label--left {
8
  z-index: 9;
9
  left: 6px;
10
}
11
.switchStyle .el-switch__label--right {
12
  z-index: 9;
13
  left: -14px;
14
}
15
.switchStyle .el-switch__label.is-active {
16
  display: block;
17
}
18
.switchStyle.el-switch .el-switch__core,
19
.el-switch .el-switch__label {
20
  width: 50px !important;
21
}
22
</style>