合并代码

src/components/DataTable/tools/Switch.vue

@@ -0,0 +1,46 @@
+<template>
+  <n-switch v-bind="getSwitchProps" v-model:value="switchVlue" @update:value="changeValue" />
+</template>
+
+<script>
+import { defineComponent, ref, unref, computed } from 'vue'
+import { NSwitch } from 'naive-ui'
+export default defineComponent({
+  name: 'TableSwitch',
+  props: {
+    ...NSwitch.props,
+    data: {
+      type: [Object, String, Number, Boolean],
+      required: true
+    },
+    rowKey: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['getRow'],
+  setup(props, { emit }) {
+    const switchVlue = ref()
+    const { data, rowKey } = unref(props)
+    switchVlue.value = rowKey ? data[rowKey] : data
+    const getSwitchProps = computed(() => {
+      return {
+        ...unref(props)
+      }
+    })
+    function changeValue(value) {
+      const { data } = props
+      const params = {
+        data,
+        value
+      }
+      emit('getRow', params)
+    }
+    return {
+      switchVlue,
+      getSwitchProps,
+      changeValue
+    }
+  }
+})
+</script>

src/views/system/user/index.vue

@@ -41,8 +41,9 @@ import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
 import TableImage from '@/components/DataTable/tools/Image.vue'
 import TableTags from '@/components/DataTable/tools/Tags.vue'
-import { getUserList, deleteUser, resetPassword } from '@/api/system/user/index.js'
+import TableSwitch from '@/components/DataTable/tools/Switch.vue'
-import { h, unref, toRefs, ref, reactive } from 'vue'
+import { getUserList } from '@/api/system/user/index.js'
+import { h, unref, ref, toRefs, reactive } from 'vue'
 import UserModal from './components/UserModal.vue'
 import info from './info.js'
 import { NSwitch } from 'naive-ui'
@@ -101,10 +102,12 @@ export default {
           align: 'center',
           width: 100,
           render(row) {
-            return h(NSwitch, {
+            return h(TableSwitch, {
-              data: row.status,
+              data: row,
-              value: row.status === 1,
+              rowKey: 'status',
-              onChange: setStatus.bind(row)
+              checkedValue: 1,
+              uncheckedValue: 2,
+              onGetRow: setStatus.bind(row)
             })
           }
         },