table switch

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

@@ -23,6 +23,7 @@ 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 TableSwitch from '@/components/DataTable/tools/Switch.vue'
 import { getUserList } from '@/api/system/user/index.js'
 import { h, unref, ref } from 'vue'
 import { reactive } from 'vue'
@@ -82,7 +83,16 @@ export default {
           title: '状态',
           key: 'status',
           align: 'center',
-          width: 100
+          width: 100,
+          render(row) {
+            return h(TableSwitch, {
+              data: row,
+              rowKey: 'status',
+              checkedValue: 1,
+              uncheckedValue: 2,
+              onGetRow: getSwitch.bind(row)
+            })
+          }
         },
         {
           title: '部门',
@@ -158,6 +168,10 @@ export default {
       data.modalShow = true
     }
 
+    function getSwitch(row) {
+      console.log(row)
+    }
+
     return { data, loadDataTable, handleUser, rowData, modalTitle }
   }
 }