TypeControlMini

Former-commit-id: 544bb95921573b62571f41ecf94f668f61960273 [formerly 544bb95921573b62571f41ecf94f668f61960273 [formerly 544bb95921573b62571f41ecf94f668f61960273 [formerly 544bb95921573b62571f41ecf94f668f61960273 [formerly d0dbb0b9a36572979b0177bf701b4cbf8549118b [formerly 4c0015c234e1e46ce269cb6ac613651a7a13e1b6]]]]]
Former-commit-id: 38a553b240cc9f79e66046aaa69f2a9559855435
Former-commit-id: 01e39256915db1c83b4c91b69db939e4534789f3
Former-commit-id: 2ddc7c21212e278eb3a1585ad180724fcd07ae6d [formerly adc0a315f6460f844897605cef5dd495ca72488a]
Former-commit-id: 7a66d40d5cea27bbc4cbff3aefe68588bcc08706
Former-commit-id: 2d9fd9a88c21e33d5ce9681ddd98aa307f0f6254
Former-commit-id: d3035c2261163bd59e56161405e306c98bb346f8
Former-commit-id: 2080bb4babd91fa7c9f7434cc1539758d812133b
Former-commit-id: ad505fc840311ec7de1c144a5a31027cffa195e0

src/pages/demo/business/table/1/componnets/PageMain/index.vue

@@ -21,7 +21,7 @@
       </template>
     </el-table-column>
 
-    <el-table-column label="状态" width="60" align="center">
+    <el-table-column label="状态" width="50" align="center">
       <template slot-scope="scope">
         <type-control
           :value="scope.row.type"
@@ -40,6 +40,25 @@
       </template>
     </el-table-column>
 
+    <el-table-column label="状态" width="50" align="center">
+      <template slot-scope="scope">
+        <type-control-mini
+          :value="scope.row.type"
+          @change="(val) => {
+            handleSwitchChange(val, scope.$index)
+          }">
+          <d2-icon
+            name="check-circle"
+            style="font-size: 20px; line-height: 32px; color: #67C23A;"
+            slot="active"/>
+          <d2-icon
+            name="times-circle"
+            style="font-size: 20px; line-height: 32px; color: #F56C6C;"
+            slot="inactive"/>
+        </type-control-mini>
+      </template>
+    </el-table-column>
+
     <el-table-column label="管理员" width="60">
       <template slot-scope="scope">
         {{scope.row.admin}}
@@ -79,9 +98,11 @@
 
 <script>
 import TypeControl from '../TypeControl'
+import TypeControlMini from '../TypeControlMini'
 export default {
   components: {
-    TypeControl
+    TypeControl,
+    TypeControlMini
   },
   props: {
     tableData: {
@@ -108,6 +129,7 @@ export default {
         ...oldValue,
         type: val
       })
+      // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
     }
   }
 }

src/pages/demo/business/table/1/componnets/TypeControl/index.vue

@@ -10,7 +10,7 @@
       :inactive-color="inactiveColor"
       :active-text="activeText"
       :inactive-text="inactiveText"
-      :disabled="switchDisabled"
+      :disabled="disabled"
       @change="handleChange">
     </el-switch>
     <span slot="reference">
@@ -51,7 +51,7 @@ export default {
   data () {
     return {
       currentValue: false,
-      switchDisabled: false
+      disabled: false
     }
   },
   watch: {
@@ -64,14 +64,14 @@ export default {
   },
   methods: {
     handleChange (val) {
-      this.switchDisabled = true
+      this.disabled = true
       this.$message({
         message: '正在发送请求',
         type: 'info'
       })
       // 请将 setTimeout 修改为您的异步请求
       setTimeout(() => {
-        this.switchDisabled = false
+        this.disabled = false
         this.$message({
           message: '修改成功',
           type: 'success'

src/pages/demo/business/table/1/componnets/TypeControlMini/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <span slot="reference">
+    <d2-icon
+      v-if="disabled"
+      name="hourglass-start"
+      style="font-size: 14px; line-height: 32px; color: #909399;"/>
+    <span @click="handleClick">
+      <slot
+        v-if="!disabled && value"
+        name="active"/>
+      <slot
+        v-if="!disabled && !value"
+        name="inactive"/>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      default: false
+    }
+  },
+  data () {
+    return {
+      currentValue: false,
+      disabled: false
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        this.currentValue = val
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleClick () {
+      // 这里先赋值是为了和 TypeControl 使用一样的 handleChange
+      this.currentValue = !this.currentValue
+      this.handleChange(this.currentValue)
+    },
+    handleChange (val) {
+      this.disabled = true
+      this.$message({
+        message: '正在发送请求',
+        type: 'info'
+      })
+      // 请将 setTimeout 修改为您的异步请求
+      setTimeout(() => {
+        this.disabled = false
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        })
+        this.$emit('change', val)
+        // 如果修改失败的话需要在这里手动将 currentValue 复原
+      }, 1000)
+    }
+  }
+}
+</script>