禁用启用更换成switch

xichongSys/src/views/Core/KtTable.vue

@@ -13,12 +13,21 @@
       <el-table-column :label="$t('action.operation')" width="185" fixed="right" v-if="showOperation" header-align="center" align="center">
         <template slot-scope="scope">
           <kt-button icon="fa fa-edit" :label="$t('action.edit')" :perms="permsEdit" :size="size" @click="handleEdit(scope.$index, scope.row)" style="float: left"/>
-          <div v-if="scope.row.status == 1">
-            <kt-button icon="fa fa-trash" label="禁用" :perms="permsDelete" :size="size" type="danger" @click="handleDelete(scope.$index, scope.row)" />
-          </div>
-          <div v-else>
-            <kt-button icon="fa fa-check-circle" label="启用" :perms="permsDelete" :size="size" type="success" @click="handleDelete(scope.$index, scope.row)" />
-          </div>
+          <el-switch
+            class="statusSwitch"
+            style="display: block"
+            v-model="scope.row.status==0?true:false"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-text="启"
+            inactive-text="禁" @change="handleDelete(scope.$index, scope.row)">
+          </el-switch>
+<!--          <div v-if="scope.row.status == 1">-->
+<!--            <kt-button icon="fa fa-trash" label="禁用" :perms="permsDelete" :size="size" type="danger" @click="handleDelete(scope.$index, scope.row)" />-->
+<!--          </div>-->
+<!--          <div v-else>-->
+<!--            <kt-button icon="fa fa-check-circle" label="启用" :perms="permsDelete" :size="size" type="success" @click="handleDelete(scope.$index, scope.row)" />-->
+<!--          </div>-->
         </template>
       </el-table-column>
     </el-table>
@@ -164,6 +173,28 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style>
+  .statusSwitch .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+  }
+  /*打开时文字位置设置*/
+  .statusSwitch .el-switch__label--right {
+    z-index: 2;
+    left: 92px;
+    bottom: 0px;
+    color: #000;
+  }
+  /*关闭时文字位置设置*/
+  .statusSwitch .el-switch__label--left {
+    z-index: 2;
+    right: 22px;
+    bottom: 0px;
+    color: #fff;
+  }
+  /*显示文字*/
+  .statusSwitch .el-switch__label.is-active {
+    display: block;
+  }
 </style>