完善用户管理模块表格数据组件

src/components/ImgUpload/index.vue

       点击上传
     </n-upload>
     <n-modal
-      v-model:show="showModal"
       preset="card"
       style="width: 600px"
     >
         }
       }
     })
-    function handleChange(file) {
-      console.log(222, file)
+    function handleChange(res) {
+      console.log('已选择的文件：', res.file.file)
     }
     /**
      * @description: 上传前判断文件是否符合条件
      */
     function handleBeforeUpload(options) {
       const { file, fileList } = options
-      console.log(11, file, fileList)
       if (props.size) {
         const size = file.file.size
         if (size < props.size * 1024 * 1024) {

src/views/system/user/index.vue

 <script>
 import headSearch from '@/components/Search/index.vue'
 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 TableAction from '@/components/DataTable/tools/Action.vue'
 import { getUserList, resetPassword, deleteUser, setUserStatus } 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 table from './table.js'
 export default {
   name: 'MenuPage',
   components: { dataTable, UserModal, headSearch },
   setup() {
     const data = reactive({
       columns: [
-        {
-          type: 'selection'
-        },
-        {
-          title: '用户编号',
-          key: 'code',
-          align: 'center'
-        },
-        {
-          title: '头像',
-          key: 'avatar',
-          align: 'center',
-          render(row) {
-            return h(TableImage, {
-              images: {
-                width: 36,
-                height: 36,
-                src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiKrYt-fEfJ4SZhF9KfLLaX9f15KV6Ve1ptA&usqp=CAU'
-              }
-            })
-          }
-        },
-        {
-          title: '用户账号',
-          key: 'username',
-          align: 'center'
-        },
-        {
-          title: '用户姓名',
-          key: 'realname',
-          align: 'center'
-        },
-        {
-          title: '角色',
-          key: 'roleList',
-          align: 'center',
-          render(row) {
-            return h(TableTags, {
-              data: row.roleList,
-              rowKey: 'name'
-            })
-          }
-        },
+        ...table.columns,
         {
           title: '状态',
           key: 'status',
             })
           }
         },
-        {
-          title: '部门',
-          key: 'deptName',
-          align: 'center'
-        },
-        {
-          title: '创建时间',
-          key: 'createTime',
-          align: 'center',
-          width: 160
-        },
-        {
-          title: '更新时间',
-          key: 'updateTime',
-          align: 'center',
-          width: 160
-        },
         {
           title: '操作',
           align: 'center',

src/views/system/user/table.js

+import { h } from 'vue'
+import TableImage from '@/components/DataTable/tools/Image.vue'
+import TableTags from '@/components/DataTable/tools/Tags.vue'
+
+const table = {
+  columns: [
+    {
+      type: 'selection'
+    },
+    {
+      title: '用户编号',
+      key: 'code',
+      align: 'center'
+    },
+    {
+      title: '头像',
+      key: 'avatar',
+      align: 'center',
+      render(row) {
+        return h(TableImage, {
+          images: {
+            width: 36,
+            height: 36,
+            src: row.avatar
+          }
+        })
+      }
+    },
+    {
+      title: '用户账号',
+      key: 'username',
+      align: 'center'
+    },
+    {
+      title: '用户姓名',
+      key: 'realname',
+      align: 'center'
+    },
+    {
+      title: '角色',
+      key: 'roleList',
+      align: 'center',
+      render(row) {
+        return h(TableTags, {
+          data: row.roleList,
+          rowKey: 'name'
+        })
+      }
+    },
+    {
+      title: '部门',
+      key: 'deptName',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      key: 'createTime',
+      align: 'center',
+      width: 160
+    },
+    {
+      title: '更新时间',
+      key: 'updateTime',
+      align: 'center',
+      width: 160
+    }
+  ]
+}
+export default table