feat: 新增 Vxe-Table 示例 (#22)

* feat: 新增 Vxe-Table 示例 * fix: table api type
2022-10-25 17:29:28 +08:00 · 2022-10-25 17:29:28 +08:00 · 91c210a284
commit 91c210a284
parent 28acd67472
14 changed files with 985 additions and 10 deletions
--- a/package.json
+++ b/package.json
@ -36,7 +36,10 @@
    "pinia": "^2.0.23",
    "screenfull": "^6.0.2",
    "vue": "^3.2.41",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "vxe-table": "^4.3.5",
+    "vxe-table-plugin-element": "^3.0.6",
+    "xe-utils": "^3.5.7"
  },
  "devDependencies": {
    "@types/js-cookie": "^3.0.2",
@ -47,6 +50,7 @@
    "@typescript-eslint/eslint-plugin": "^5.41.0",
    "@typescript-eslint/parser": "^5.41.0",
    "@vitejs/plugin-vue": "^3.1.2",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "eslint": "^8.26.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -10,6 +10,7 @@ specifiers:
  '@typescript-eslint/eslint-plugin': ^5.41.0
  '@typescript-eslint/parser': ^5.41.0
  '@vitejs/plugin-vue': ^3.1.2
+  '@vitejs/plugin-vue-jsx': ^2.0.1
  '@vue/eslint-config-prettier': ^7.0.0
  '@vue/eslint-config-typescript': ^11.0.2
  axios: ^1.1.3
@ -40,6 +41,9 @@ specifiers:
  vue-eslint-parser: ^9.1.0
  vue-router: ^4.1.6
  vue-tsc: ^1.0.9
+  vxe-table: ^4.3.5
+  vxe-table-plugin-element: ^3.0.6
+  xe-utils: ^3.5.7

 dependencies:
  '@element-plus/icons-vue': 2.0.10_vue@3.2.41
@ -56,6 +60,9 @@ dependencies:
  screenfull: 6.0.2
  vue: 3.2.41
  vue-router: 4.1.6_vue@3.2.41
+  vxe-table: 4.3.5_vue@3.2.41+xe-utils@3.5.7
+  vxe-table-plugin-element: 3.0.6_vxe-table@4.3.5
+  xe-utils: 3.5.7

 devDependencies:
  '@types/js-cookie': 3.0.2
@ -66,6 +73,7 @@ devDependencies:
  '@typescript-eslint/eslint-plugin': 5.41.0_huremdigmcnkianavgfk3x6iou
  '@typescript-eslint/parser': 5.41.0_wyqvi574yv7oiwfeinomdzmc3m
  '@vitejs/plugin-vue': 3.1.2_vite@3.1.8+vue@3.2.41
+  '@vitejs/plugin-vue-jsx': 2.0.1_vite@3.1.8+vue@3.2.41
  '@vue/eslint-config-prettier': 7.0.0_5t6g5rrqvlktilv3n3sw5svbdi
  '@vue/eslint-config-typescript': 11.0.2_dssioqymv64e7t7ogoe3tncpcu
  eslint: 8.26.0
@ -105,6 +113,177 @@ packages:
    resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
    dev: true

+  /@babel/code-frame/7.18.6:
+    resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.18.6
+    dev: true
+
+  /@babel/compat-data/7.19.4:
+    resolution: {integrity: sha512-CHIGpJcUQ5lU9KrPHTjBMhVwQG6CQjxfg36fGXl3qk/Gik1WwWachaXFuo0uCWJT/mStOKtcbFJCaVLihC1CMw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/core/7.19.6:
+    resolution: {integrity: sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.19.6
+      '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.19.6
+      '@babel/helper-module-transforms': 7.19.6
+      '@babel/helpers': 7.19.4
+      '@babel/parser': 7.19.6
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.19.6
+      '@babel/types': 7.19.4
+      convert-source-map: 1.9.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/generator/7.19.6:
+    resolution: {integrity: sha512-oHGRUQeoX1QrKeJIKVe0hwjGqNnVYsM5Nep5zo0uE0m42sLH+Fsd2pStJ5sRM1bNyTUUoz0pe2lTeMJrb/taTA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.4
+      '@jridgewell/gen-mapping': 0.3.2
+      jsesc: 2.5.2
+    dev: true
+
+  /@babel/helper-annotate-as-pure/7.18.6:
+    resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.4
+    dev: true
+
+  /@babel/helper-compilation-targets/7.19.3_@babel+core@7.19.6:
+    resolution: {integrity: sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.19.4
+      '@babel/core': 7.19.6
+      '@babel/helper-validator-option': 7.18.6
+      browserslist: 4.21.4
+      semver: 6.3.0
+    dev: true
+
+  /@babel/helper-create-class-features-plugin/7.19.0_@babel+core@7.19.6:
+    resolution: {integrity: sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.19.6
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-member-expression-to-functions': 7.18.9
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-replace-supers': 7.19.1
+      '@babel/helper-split-export-declaration': 7.18.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-environment-visitor/7.18.9:
+    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-function-name/7.19.0:
+    resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.18.10
+      '@babel/types': 7.19.4
+    dev: true
+
+  /@babel/helper-hoist-variables/7.18.6:
+    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.4
+    dev: true
+
+  /@babel/helper-member-expression-to-functions/7.18.9:
+    resolution: {integrity: sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.4
+    dev: true
+
+  /@babel/helper-module-imports/7.18.6:
+    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.4
+    dev: true
+
+  /@babel/helper-module-transforms/7.19.6:
+    resolution: {integrity: sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-simple-access': 7.19.4
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/helper-validator-identifier': 7.19.1
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.19.6
+      '@babel/types': 7.19.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-optimise-call-expression/7.18.6:
+    resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.4
+    dev: true
+
+  /@babel/helper-plugin-utils/7.19.0:
+    resolution: {integrity: sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-replace-supers/7.19.1:
+    resolution: {integrity: sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-member-expression-to-functions': 7.18.9
+      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/traverse': 7.19.6
+      '@babel/types': 7.19.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-simple-access/7.19.4:
+    resolution: {integrity: sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.4
+    dev: true
+
+  /@babel/helper-split-export-declaration/7.18.6:
+    resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.4
+    dev: true
+
  /@babel/helper-string-parser/7.19.4:
    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
    engines: {node: '>=6.9.0'}
@ -113,6 +292,31 @@ packages:
    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
    engines: {node: '>=6.9.0'}

+  /@babel/helper-validator-option/7.18.6:
+    resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helpers/7.19.4:
+    resolution: {integrity: sha512-G+z3aOx2nfDHwX/kyVii5fJq+bgscg89/dJNWpYeKeBv3v9xX8EIabmx1k6u9LS04H7nROFVRVK+e3k0VHp+sw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.19.6
+      '@babel/types': 7.19.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/highlight/7.18.6:
+    resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: true
+
  /@babel/parser/7.19.6:
    resolution: {integrity: sha512-h1IUp81s2JYJ3mRkdxJgs4UvmSsRvDrx5ICSJbPvtWYv5i1nTBGcBpnog+89rAFMwvvru6E5NUHdBe01UeSzYA==}
    engines: {node: '>=6.0.0'}
@ -120,6 +324,76 @@ packages:
    dependencies:
      '@babel/types': 7.19.4

+  /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.19.6:
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.19.6
+      '@babel/helper-plugin-utils': 7.19.0
+    dev: true
+
+  /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.19.6:
+    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.19.6
+      '@babel/helper-plugin-utils': 7.19.0
+    dev: true
+
+  /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.19.6:
+    resolution: {integrity: sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.19.6
+      '@babel/helper-plugin-utils': 7.19.0
+    dev: true
+
+  /@babel/plugin-transform-typescript/7.19.3_@babel+core@7.19.6:
+    resolution: {integrity: sha512-z6fnuK9ve9u/0X0rRvI9MY0xg+DOUaABDYOe+/SQTxtlptaBB/V9JIUxJn6xp3lMBeb9qe8xSFmHU35oZDXD+w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.19.6
+      '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.6
+      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.19.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/template/7.18.10:
+    resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/parser': 7.19.6
+      '@babel/types': 7.19.4
+    dev: true
+
+  /@babel/traverse/7.19.6:
+    resolution: {integrity: sha512-6l5HrUCzFM04mfbG09AagtYyR2P0B71B1wN7PfSPiksDPz2k5H9CBC1tcZpz2M8OxbKTPccByoOJ22rUKbpmQQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.19.6
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.19.6
+      '@babel/types': 7.19.4
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
  /@babel/types/7.19.4:
    resolution: {integrity: sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==}
    engines: {node: '>=6.9.0'}
@ -649,6 +923,23 @@ packages:
      - rollup
    dev: true

+  /@vitejs/plugin-vue-jsx/2.0.1_vite@3.1.8+vue@3.2.41:
+    resolution: {integrity: sha512-lmiR1k9+lrF7LMczO0pxtQ8mOn6XeppJDHxnpxkJQpT5SiKz4SKhKdeNstXaTNuR8qZhUo5X0pJlcocn72Y4Jg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^3.0.0
+      vue: ^3.0.0
+    dependencies:
+      '@babel/core': 7.19.6
+      '@babel/plugin-syntax-import-meta': 7.10.4_@babel+core@7.19.6
+      '@babel/plugin-transform-typescript': 7.19.3_@babel+core@7.19.6
+      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.19.6
+      vite: 3.1.8_sass@1.55.0+terser@5.15.1
+      vue: 3.2.41
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
  /@vitejs/plugin-vue/3.1.2_vite@3.1.8+vue@3.2.41:
    resolution: {integrity: sha512-3zxKNlvA3oNaKDYX0NBclgxTQ1xaFdL7PzwF6zj9tGFziKwmBa3Q/6XcJQxudlT81WxDjEhHmevvIC4Orc1LhQ==}
    engines: {node: ^14.18.0 || >=16.0.0}
@ -700,6 +991,27 @@ packages:
      '@volar/vue-language-core': 1.0.9
    dev: true

+  /@vue/babel-helper-vue-transform-on/1.0.2:
+    resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
+    dev: true
+
+  /@vue/babel-plugin-jsx/1.1.1_@babel+core@7.19.6:
+    resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
+    dependencies:
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.19.6
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.19.6
+      '@babel/types': 7.19.4
+      '@vue/babel-helper-vue-transform-on': 1.0.2
+      camelcase: 6.3.0
+      html-tags: 3.2.0
+      svg-tags: 1.0.0
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+    dev: true
+
  /@vue/compiler-core/3.2.41:
    resolution: {integrity: sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==}
    dependencies:
@ -893,6 +1205,13 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /ansi-styles/3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: true
+
  /ansi-styles/4.3.0:
    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
    engines: {node: '>=8'}
@ -1048,6 +1367,17 @@ packages:
      fill-range: 7.0.1
    dev: true

+  /browserslist/4.21.4:
+    resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001423
+      electron-to-chromium: 1.4.284
+      node-releases: 2.0.6
+      update-browserslist-db: 1.0.10_browserslist@4.21.4
+    dev: true
+
  /buffer-from/1.1.2:
    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
    dev: true
@ -1084,6 +1414,15 @@ packages:
    engines: {node: '>=6'}
    dev: true

+  /camelcase/6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /caniuse-lite/1.0.30001423:
+    resolution: {integrity: sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ==}
+    dev: true
+
  /chalk/1.1.3:
    resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
    engines: {node: '>=0.10.0'}
@ -1095,6 +1434,15 @@ packages:
      supports-color: 2.0.0
    dev: true

+  /chalk/2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: true
+
  /chalk/4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
    engines: {node: '>=10'}
@ -1169,6 +1517,12 @@ packages:
      object-visit: 1.0.1
    dev: true

+  /color-convert/1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: true
+
  /color-convert/2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@ -1176,6 +1530,10 @@ packages:
      color-name: 1.1.4
    dev: true

+  /color-name/1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: true
+
  /color-name/1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
    dev: true
@ -1217,6 +1575,10 @@ packages:
    resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
    dev: true

+  /convert-source-map/1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+    dev: true
+
  /copy-descriptor/0.1.1:
    resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==}
    engines: {node: '>=0.10.0'}
@ -1434,6 +1796,10 @@ packages:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
    dev: true

+  /electron-to-chromium/1.4.284:
+    resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
+    dev: true
+
  /element-plus/2.2.19_vue@3.2.41:
    resolution: {integrity: sha512-uN0gt9lUus/IHzu5J6vkbYoYJgUtU05osdtFv9RO27bHKOG5GN7dH6uA3OKfkQQ6R2sV8ZxY1rc9PH1X8Dgrow==}
    peerDependencies:
@ -1690,6 +2056,11 @@ packages:
      esbuild-windows-arm64: 0.15.12
    dev: true

+  /escalade/3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+    engines: {node: '>=6'}
+    dev: true
+
  /escape-html/1.0.3:
    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
    dev: false
@ -2103,6 +2474,11 @@ packages:
    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
    dev: true

+  /gensync/1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
  /get-stream/6.0.1:
    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
    engines: {node: '>=10'}
@ -2138,6 +2514,11 @@ packages:
      path-is-absolute: 1.0.1
    dev: true

+  /globals/11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
  /globals/13.17.0:
    resolution: {integrity: sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==}
    engines: {node: '>=8'}
@ -2184,6 +2565,11 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /has-flag/3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+    dev: true
+
  /has-flag/4.0.0:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}
@ -2232,6 +2618,11 @@ packages:
    hasBin: true
    dev: true

+  /html-tags/3.2.0:
+    resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
+    engines: {node: '>=8'}
+    dev: true
+
  /htmlparser2/3.10.1:
    resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}
    dependencies:
@ -2482,6 +2873,10 @@ packages:
    resolution: {integrity: sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==}
    dev: true

+  /js-tokens/4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: true
+
  /js-yaml/4.1.0:
    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
    hasBin: true
@ -2489,6 +2884,12 @@ packages:
      argparse: 2.0.1
    dev: true

+  /jsesc/2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
  /json-schema-traverse/0.4.1:
    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
    dev: true
@ -2504,6 +2905,12 @@ packages:
      minimist: 1.2.7
    dev: true

+  /json5/2.2.1:
+    resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
  /jsonfile/6.1.0:
    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
    dependencies:
@ -2833,6 +3240,10 @@ packages:
    resolution: {integrity: sha512-ZNaury9r0NxaT2oL65GvdGDy+5PlSaHTovT6JV5tOW07k1TQmgC0olZETa4C9KZg0+6zBr99ctTYa3Utqj9P/Q==}
    dev: true

+  /node-releases/2.0.6:
+    resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
+    dev: true
+
  /normalize-path/3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
    engines: {node: '>=0.10.0'}
@ -3302,6 +3713,11 @@ packages:
    engines: {node: ^14.13.1 || >=16.0.0}
    dev: false

+  /semver/6.3.0:
+    resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
+    hasBin: true
+    dev: true
+
  /semver/7.3.8:
    resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
    engines: {node: '>=10'}
@ -3554,6 +3970,13 @@ packages:
      has-flag: 1.0.0
    dev: true

+  /supports-color/5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: true
+
  /supports-color/7.2.0:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}
@ -3586,6 +4009,10 @@ packages:
      - supports-color
    dev: true

+  /svg-tags/1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+    dev: true
+
  /svgo/2.8.0:
    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
    engines: {node: '>=10.13.0'}
@ -3778,6 +4205,17 @@ packages:
      isobject: 3.0.1
    dev: true

+  /update-browserslist-db/1.0.10_browserslist@4.21.4:
+    resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.4
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: true
+
  /uri-js/4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
    dependencies:
@ -3926,6 +4364,24 @@ packages:
      '@vue/server-renderer': 3.2.41_vue@3.2.41
      '@vue/shared': 3.2.41

+  /vxe-table-plugin-element/3.0.6_vxe-table@4.3.5:
+    resolution: {integrity: sha512-V0SQ2TGXmooDbHTiRSJHSHnFFBatp7fFP4vEDNPHQlGDgypo2stOJ8KXKENQznZxpNWKkmxSBNFZaMFEr+ycEQ==}
+    peerDependencies:
+      vxe-table: ^4.2.0
+    dependencies:
+      vxe-table: 4.3.5_vue@3.2.41+xe-utils@3.5.7
+    dev: false
+
+  /vxe-table/4.3.5_vue@3.2.41+xe-utils@3.5.7:
+    resolution: {integrity: sha512-JEvGAs7SBN1rWn5f2tkoRiXd/rAT7RfnDTTlFsHsTtASiUTKNTISI2WBsVeLkkNRTs0SXh6FgrYsIPO2soSBXA==}
+    peerDependencies:
+      vue: ^3.2.28
+      xe-utils: ^3.5.0
+    dependencies:
+      vue: 3.2.41
+      xe-utils: 3.5.7
+    dev: false
+
  /which/2.0.2:
    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
    engines: {node: '>= 8'}
@ -3961,6 +4417,10 @@ packages:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
    dev: true

+  /xe-utils/3.5.7:
+    resolution: {integrity: sha512-3H+fDBKBR2wLJgyA7k9C/w1Xljx6Maml5ukV0WDY06HjYyGs2FEz6XhcwRCLIDXX4pBP3Gu0nX9DbCeuuRA2Ew==}
+    dev: false
+
  /xml-name-validator/4.0.0:
    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
    engines: {node: '>=12'}
--- a/src/api/table.ts
+++ b/src/api/table.ts
@ -6,7 +6,7 @@ interface ICreateTableDataApi {
 }

 interface IUpdateTableDataApi {
-  id: number
+  id: string
  username: string
  password?: string
 }
@ -31,7 +31,7 @@ export function createTableDataApi(data: ICreateTableDataApi) {
 }

 /** 删 */
-export function deleteTableDataApi(id: number) {
+export function deleteTableDataApi(id: string) {
  return request({
    url: `table/${id}`,
    method: "delete"
--- a/src/main.ts
+++ b/src/main.ts
@ -13,6 +13,8 @@ import "uno.css"
 import "normalize.css"
 import "element-plus/dist/index.css"
 import "element-plus/theme-chalk/dark/css-vars.css"
+import "vxe-table/lib/style.css"
+import "vxe-table-plugin-element/dist/style.css"
 import "@/styles/index.scss"

 const app = createApp(App)
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@ -1,8 +1,10 @@
 import { type App } from "vue"
 import { loadElementPlus } from "./element-pus"
 import { loadElementPlusIcon } from "./element-pus-icon"
+import { loadVxeTable } from "./vxe-table"

 export function loadPlugins(app: App) {
  loadElementPlus(app)
  loadElementPlusIcon(app)
+  loadVxeTable(app)
 }
--- a/src/plugins/vxe-table/index.ts
+++ b/src/plugins/vxe-table/index.ts
@ -0,0 +1,66 @@
+import { type App } from "vue"
+// https://vxetable.cn/#/table/start/install
+import VXETable from "vxe-table"
+// https://github.com/x-extends/vxe-table-plugin-element
+import VXETablePluginElement from "vxe-table-plugin-element"
+
+VXETable.use(VXETablePluginElement)
+
+/** 全局默认参数 */
+VXETable.setup({
+  /** 全局尺寸 */
+  size: "medium",
+  /** 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡 */
+  zIndex: 9999,
+  /** 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据 */
+  version: 0,
+  /** 全局 loading 提示内容，如果为 null 则不显示文本 */
+  loadingText: null,
+  table: {
+    showHeader: true,
+    showOverflow: "tooltip",
+    showHeaderOverflow: "tooltip",
+    autoResize: true,
+    // stripe: false,
+    border: false,
+    // round: false,
+    emptyText: "暂无数据",
+    rowConfig: {
+      isHover: true,
+      isCurrent: true
+    },
+    columnConfig: {
+      resizable: true
+    },
+    align: "center",
+    headerAlign: "center",
+    /** 行数据的唯一主键字段名 */
+    rowId: "_VXE_ID"
+  },
+  pager: {
+    // size: "medium",
+    /** 配套的样式 */
+    perfect: false,
+    pageSize: 10,
+    pagerCount: 7,
+    pageSizes: [10, 20, 50],
+    layouts: ["Total", "PrevJump", "PrevPage", "Number", "NextPage", "NextJump", "Sizes", "FullJump"]
+  },
+  modal: {
+    minWidth: 500,
+    minHeight: 400,
+    lockView: true,
+    mask: true,
+    // duration: 3000,
+    // marginSize: 20,
+    dblclickZoom: false,
+    showTitleOverflow: true,
+    transfer: true,
+    draggable: false
+  }
+})
+
+export function loadVxeTable(app: App) {
+  /** Vxe-Table 组件完整引入 */
+  app.use(VXETable)
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -2,6 +2,8 @@
@import "./variables.css";
 // Transition
@import "./transition.scss";
+// Vxe-Table
+@import "./vxe-table.scss";
 // 注册多主题
@import "./theme/register.scss";

--- a/src/styles/vxe-table.scss
+++ b/src/styles/vxe-table.scss
@ -0,0 +1,34 @@
+/** 自定义 vxe-table 样式 */
+
+.vxe-grid {
+  // 表单
+  &--form-wrapper {
+    .vxe-form {
+      padding: 10px 20px;
+      margin-bottom: 20px;
+    }
+  }
+
+  // 工具栏
+  &--toolbar-wrapper {
+    .vxe-toolbar {
+      padding: 20px;
+    }
+  }
+
+  // 分页
+  &--pager-wrapper {
+    .vxe-pager {
+      height: 70px;
+      &--wrapper {
+        @media screen and (max-width: 750px) {
+          .vxe-pager--total,
+          .vxe-pager--sizes,
+          .vxe-pager--jump {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -1,8 +1,8 @@
 import dayjs from "dayjs"

 /** 格式化时间 */
-export const formatDateTime = (time: null | string) => {
-  if (time == null || time === "") {
+export const formatDateTime = (time: string | number | Date) => {
+  if (!time) {
    return "N/A"
  }
  const date = new Date(time)
--- a/src/views/table/element-plus/index.vue
+++ b/src/views/table/element-plus/index.vue
@ -69,7 +69,7 @@ const handleDelete = (row: any) => {
 //#endregion

 //#region 改
-const currentUpdateId = ref<undefined | number>(undefined)
+const currentUpdateId = ref<undefined | string>(undefined)
 const handleUpdate = (row: any) => {
  currentUpdateId.value = row.id
  formData.username = row.username
@ -90,8 +90,8 @@ const getTableData = () => {
  getTableDataApi({
    currentPage: paginationData.currentPage,
    size: paginationData.pageSize,
-    username: searchData.username === "" ? undefined : searchData.username,
-    phone: searchData.phone === "" ? undefined : searchData.phone
+    username: searchData.username || undefined,
+    phone: searchData.phone || undefined
  })
    .then((res: any) => {
      paginationData.total = res.data.total
--- a/src/views/table/vxe-table/index.vue
+++ b/src/views/table/vxe-table/index.vue
@ -1,7 +1,383 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { nextTick, reactive, ref } from "vue"
+import { type ElMessageBoxOptions, ElMessageBox, ElMessage } from "element-plus"
+import { deleteTableDataApi, getTableDataApi } from "@/api/table"
+import RoleColumnSolts from "./tsx/RoleColumnSolts"
+import StatusColumnSolts from "./tsx/StatusColumnSolts"
+import {
+  type VxeGridInstance,
+  type VxeGridProps,
+  type VxeModalInstance,
+  type VxeModalProps,
+  type VxeFormInstance,
+  type VxeFormProps,
+  type VxeGridPropTypes,
+  type VxeFormDefines
+} from "vxe-table"
+
+//#region vxe-grid
+interface IRowMeta {
+  id: string
+  username: string
+  roles: string
+  phone: string
+  email: string
+  status: boolean
+  createTime: string
+  /** vxe-table 自动添加上去的属性 */
+  _VXE_ID?: string
+}
+const xGridDom = ref<VxeGridInstance>()
+const xGridOpt: VxeGridProps = reactive({
+  loading: true,
+  autoResize: true,
+  /** 分页配置项 */
+  pagerConfig: {
+    align: "right"
+  },
+  /** 表单配置项 */
+  formConfig: {
+    items: [
+      {
+        field: "username",
+        itemRender: {
+          name: "$input",
+          props: { placeholder: "用户名", clearable: true }
+        }
+      },
+      {
+        field: "phone",
+        itemRender: {
+          name: "$input",
+          props: { placeholder: "手机号", clearable: true }
+        }
+      },
+      {
+        itemRender: {
+          name: "$buttons",
+          children: [
+            {
+              props: { type: "submit", content: "查询", status: "primary" }
+            },
+            {
+              props: { type: "reset", content: "重置" }
+            }
+          ]
+        }
+      }
+    ]
+  },
+  /** 工具栏配置 */
+  toolbarConfig: {
+    refresh: true,
+    custom: true,
+    slots: { buttons: "toolbar-btns" }
+  },
+  /** 自定义列配置项 */
+  customConfig: {
+    /** 是否允许列选中  */
+    checkMethod: ({ column }) => !["username"].includes(column.field)
+  },
+  /** 列配置 */
+  columns: [
+    {
+      type: "checkbox",
+      width: "50px"
+    },
+    {
+      field: "username",
+      title: "用户名"
+    },
+    {
+      field: "roles",
+      title: "角色",
+      /** 自定义列与 type: "html" 的列一起使用，会产生错误，所以采用 TSX 实现 */
+      slots: RoleColumnSolts
+    },
+    {
+      field: "phone",
+      title: "手机号"
+    },
+    {
+      field: "email",
+      title: "邮箱"
+    },
+    {
+      field: "status",
+      title: "状态",
+      slots: StatusColumnSolts
+    },
+    {
+      field: "createTime",
+      title: "创建时间"
+    },
+    {
+      title: "操作",
+      width: "150px",
+      fixed: "right",
+      showOverflow: false,
+      slots: { default: "row-operate" }
+    }
+  ],
+  /** 数据代理配置项（基于 Promise API） */
+  proxyConfig: {
+    /** 启用动态序号代理 */
+    seq: true,
+    /** 是否代理表单 */
+    form: true,
+    /** 是否自动加载，默认为 true */
+    // autoLoad: false,
+    props: {
+      total: "total"
+    },
+    ajax: {
+      query: ({ page, form }: VxeGridPropTypes.ProxyAjaxQueryParams) => {
+        xGridOpt.loading = true
+        crudStore.clearTable()
+        return new Promise<any>((resolve: Function) => {
+          let total = 0
+          let result: IRowMeta[] = []
+          /** 加载数据 */
+          const callback = (res: any) => {
+            if (res && res.data) {
+              const resData = res.data
+              // 总数
+              if (Number.isInteger(resData.total)) {
+                total = resData.total
+              }
+              // 分页数据
+              if (Array.isArray(resData.list)) {
+                result = resData.list
+              }
+            }
+            xGridOpt.loading = false
+            resolve({ total, result })
+          }
+
+          /** 接口需要的参数 */
+          const params = {
+            username: form.username || undefined,
+            phone: form.phone || undefined,
+            size: page.pageSize,
+            currentPage: page.currentPage
+          }
+          /** 调用接口 */
+          getTableDataApi(params).then(callback).catch(callback)
+        })
+      }
+    }
+  }
+})
+//#endregion
+
+//#region vxe-modal
+const xModalDom = ref<VxeModalInstance>()
+const xModalOpt: VxeModalProps = reactive({
+  title: "",
+  showClose: true,
+  escClosable: true,
+  maskClosable: true,
+  beforeHideMethod: () => {
+    xFormDom.value?.clearValidate()
+    return Promise.resolve()
+  }
+})
+//#endregion
+
+//#region vxe-form
+const xFormDom = ref<VxeFormInstance>()
+const xFormOpt = reactive<VxeFormProps>({
+  span: 24,
+  titleWidth: "100px",
+  loading: false,
+  /** 是否显示标题冒号 */
+  titleColon: false,
+  /** 表单数据 */
+  data: {
+    username: "",
+    password: ""
+  },
+  /** 项列表 */
+  items: [
+    {
+      field: "username",
+      title: "用户名",
+      itemRender: { name: "$input", props: { placeholder: "请输入" } }
+    },
+    {
+      field: "password",
+      title: "密码",
+      itemRender: { name: "$input", props: { placeholder: "请输入" } }
+    },
+    {
+      align: "right",
+      itemRender: {
+        name: "$buttons",
+        children: [
+          { props: { content: "取消" }, events: { click: () => xModalDom.value?.close() } },
+          {
+            props: { type: "submit", content: "确定", status: "primary" },
+            events: { click: () => crudStore.onSubmitForm() }
+          }
+        ]
+      }
+    }
+  ],
+  /** 校验规则 */
+  rules: {
+    username: [
+      {
+        required: true,
+        validator: ({ itemValue }) => {
+          if (!itemValue) {
+            return new Error("请输入")
+          }
+          if (!itemValue.trim()) {
+            return new Error("空格无效")
+          }
+        }
+      }
+    ],
+    password: [
+      {
+        required: true,
+        validator: ({ itemValue }) => {
+          if (!itemValue) {
+            return new Error("请输入")
+          }
+          if (!itemValue.trim()) {
+            return new Error("空格无效")
+          }
+        }
+      }
+    ]
+  }
+})
+//#endregion
+
+//#region CRUD
+const crudStore = reactive({
+  /** 表单类型：修改：true 新增：false */
+  isUpdate: true,
+  /** 加载表格数据 */
+  commitQuery: () => xGridDom.value?.commitProxy("query"),
+  /** 清空表格数据 */
+  clearTable: () => xGridDom.value?.reloadData([]),
+  /** 点击显示弹窗 */
+  onShowModal: (row?: IRowMeta) => {
+    if (row) {
+      crudStore.isUpdate = true
+      xModalOpt.title = "修改用户"
+      // 赋值
+      xFormOpt.data.username = row.username
+    } else {
+      crudStore.isUpdate = false
+      xModalOpt.title = "新增用户"
+    }
+    // 禁用表单项
+    if (xFormOpt.items) {
+      if (xFormOpt.items[0]?.itemRender?.props) {
+        xFormOpt.items[0].itemRender.props.disabled = crudStore.isUpdate
+      }
+    }
+    xModalDom.value?.open()
+    nextTick(() => {
+      !crudStore.isUpdate && xFormDom.value?.reset()
+      xFormDom.value?.clearValidate()
+    })
+  },
+  /** 确定并保存 */
+  onSubmitForm: () => {
+    if (xFormOpt.loading) return
+    xFormDom.value?.validate((errMap?: VxeFormDefines.ValidateErrorMapParams) => {
+      if (errMap) return
+      xFormOpt.loading = true
+      const callback = (err?: any) => {
+        xFormOpt.loading = false
+        if (err) return
+        xModalDom.value?.close()
+        ElMessage.success("操作成功")
+        !crudStore.isUpdate && crudStore.afterInsert()
+        crudStore.commitQuery()
+      }
+      if (crudStore.isUpdate) {
+        // 调用修改接口
+        setTimeout(() => callback(), 1000)
+      } else {
+        // 调用新增接口
+        setTimeout(() => callback(), 1000)
+      }
+    })
+  },
+  /** 新增后是否跳入最后一页 */
+  afterInsert: () => {
+    const pager: VxeGridPropTypes.ProxyAjaxQueryPageParams = xGridDom.value?.getProxyInfo()?.pager
+    if (pager) {
+      const currTotal: number = pager.currentPage * pager.pageSize
+      if (currTotal === pager.total) {
+        ++pager.currentPage
+      }
+    }
+  },
+  /** 删除 */
+  onDelete: (row: IRowMeta) => {
+    const tip = `确定 <strong style='color:red;'>删除</strong> 用户 <strong style='color:#409eff;'>${row.username}</strong> ？`
+    const config: ElMessageBoxOptions = {
+      type: "warning",
+      showClose: true,
+      closeOnClickModal: true,
+      closeOnPressEscape: true,
+      cancelButtonText: "取消",
+      confirmButtonText: "确定",
+      dangerouslyUseHTMLString: true
+    }
+    ElMessageBox.confirm(tip, "提示", config)
+      .then(() => {
+        deleteTableDataApi(row.id)
+          .then(() => {
+            ElMessage.success("删除成功")
+            crudStore.afterDelete()
+            crudStore.commitQuery()
+          })
+          .catch(() => 1)
+      })
+      .catch(() => 1)
+  },
+  /** 删除后是否返回上一页 */
+  afterDelete: () => {
+    const tableData: IRowMeta[] = xGridDom.value!.getData()
+    const pager: VxeGridPropTypes.ProxyAjaxQueryPageParams = xGridDom.value?.getProxyInfo()?.pager
+    if (pager && pager.currentPage > 1 && tableData.length === 1) {
+      --pager.currentPage
+    }
+  },
+  /** 更多自定义方法 */
+  moreFunc: () => {}
+})
+//#endregion
+</script>

 <template>
-  <div class="app-container">欢迎 PR !!!</div>
+  <div class="app-container">
+    <!-- 表格 -->
+    <vxe-grid ref="xGridDom" v-bind="xGridOpt">
+      <!-- 左侧按钮列表 -->
+      <template #toolbar-btns>
+        <vxe-button status="primary" icon="vxe-icon-add" @click="crudStore.onShowModal()">新增用户</vxe-button>
+        <vxe-button status="danger" icon="vxe-icon-delete">批量删除</vxe-button>
+      </template>
+      <!-- 操作 -->
+      <template #row-operate="{ row }">
+        <el-button link type="primary" @click="crudStore.onShowModal(row)">编辑</el-button>
+        <el-button link type="danger" @click="crudStore.onDelete(row)">删除</el-button>
+      </template>
+    </vxe-grid>
+    <!-- 弹窗 -->
+    <vxe-modal ref="xModalDom" v-bind="xModalOpt">
+      <!-- 表单 -->
+      <vxe-form ref="xFormDom" v-bind="xFormOpt" />
+    </vxe-modal>
+  </div>
 </template>

 <style lang="scss" scoped></style>
--- a/src/views/table/vxe-table/tsx/RoleColumnSolts.tsx
+++ b/src/views/table/vxe-table/tsx/RoleColumnSolts.tsx
@ -0,0 +1,11 @@
+import { type VxeColumnPropTypes } from "vxe-table/types/column"
+
+const solts: VxeColumnPropTypes.Slots = {
+  default: ({ row, column }) => {
+    const cellValue = row[column.field]
+    const type = cellValue === "admin" ? "" : "warning"
+    return [<span class={`el-tag el-tag--${type}`}>{cellValue}</span>]
+  }
+}
+
+export default solts
--- a/src/views/table/vxe-table/tsx/StatusColumnSolts.tsx
+++ b/src/views/table/vxe-table/tsx/StatusColumnSolts.tsx
@ -0,0 +1,16 @@
+import { type VxeColumnPropTypes } from "vxe-table/types/column"
+
+const solts: VxeColumnPropTypes.Slots = {
+  default: ({ row, column }) => {
+    const cellValue = row[column.field]
+    let type = "danger"
+    let value = "禁用"
+    if (cellValue) {
+      type = "success"
+      value = "启用"
+    }
+    return [<span class={`el-tag el-tag--${type} el-tag--plain`}>{value}</span>]
+  }
+}
+
+export default solts
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,6 +1,7 @@
 import { type ConfigEnv, type UserConfigExport, loadEnv } from "vite"
 import path, { resolve } from "path"
 import vue from "@vitejs/plugin-vue"
+import vueJsx from "@vitejs/plugin-vue-jsx"
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
 import svgLoader from "vite-svg-loader"
 import UnoCSS from "unocss/vite"
@ -65,6 +66,7 @@ export default (configEnv: ConfigEnv): UserConfigExport => {
    /** Vite 插件 */
    plugins: [
      vue(),
+      vueJsx(),
      /** 将 SVG 静态图转化为 Vue 组件 */
      svgLoader(),
      /** SVG */