有關element ui中的 switch在表格中使用多個時互相不收影響的問題

 

一、數據如下

 

 二、表格中的數據如下

 

 

 

 三、樣式的改變

　　原來switch的樣式是想下面的這樣的

　　

 

 如果想變成我案例中的樣子需要重新寫一下樣式

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

當然你也可以參考下面的兩個鏈接，覺得他們寫的更詳細一下
https://blog.csdn.net/feast_aw/article/details/92005475  開關互不影響
https://www.cnblogs.com/wsys/p/10156857.html   開啟和關閉時樣式