diff --git a/package.json b/package.json
index 6f7c98c..20ab1dd 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "default-passive-events": "^2.0.0",
     "echarts": "^5.3.1",
     "echarts-liquidfill": "^3.1.0",
-    "element-plus": "^2.2.15",
+    "element-plus": "^2.2.16",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",
     "fuse.js": "^6.6.2",
@@ -43,7 +43,7 @@
     "sass": "^1.54.0",
     "splitpanes": "^3.1.1",
     "svg-sprite-loader": "^6.0.11",
-    "vue": "^3.0.0",
+    "vue": "^3.2.39",
     "vue-cropper": "^1.0.3",
     "vue-cropperjs": "^5.0.0",
     "vue-fuse": "^4.1.1",
@@ -53,12 +53,15 @@
     "vue-splitpane": "^1.0.6",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.0-0",
+    "vxe-table": "^4.3.5",
+    "xe-utils": "^3.5.6",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.32.0",
     "@typescript-eslint/parser": "^5.32.0",
     "@vitejs/plugin-vue": "^3.0.0",
+    "consola": "^2.15.3",
     "dart-sass": "^1.25.0",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
@@ -72,6 +75,7 @@
     "unplugin-vue-define-options": "^0.7.3",
     "vite": "^3.0.0",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^0.38.4"
diff --git a/src/components/Table/PropTable/index.vue b/src/components/Table/PropTable/index.vue
index c53e217..ed2665b 100644
--- a/src/components/Table/PropTable/index.vue
+++ b/src/components/Table/PropTable/index.vue
@@ -36,36 +36,40 @@
         <slot name="btn"></slot>
       </div>
       <!-- ------------表格--------------->
-      <el-table
-          v-loading="loading"
-          @selection-change="(val) => emit('selection-change', val)"
-          :data="list"
-          :border="true"
-      >
-        <template v-for="item in columns">
-          <el-table-column
-              v-if="item.type"
-              :type="item.type"
-              :width="item.width"
-              :align="item.align"
-              :fixed="item.fixed"
-              :label="item.label"
-          />
-          <el-table-column
-              v-else
-              :prop="item.name"
-              :width="item.width"
-              :align="item.align"
-              :fixed="item.fixed"
-              :label="item.label"
-          >
-            <template #default="scope">
-              <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
-              <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
-            </template>
-          </el-table-column>
-        </template>
-      </el-table>
+      <div class="table">
+        <el-table
+            class="zb-table"
+            v-loading="loading"
+            @selection-change="(val) => emit('selection-change', val)"
+            :data="list"
+            :border="true"
+        >
+          <template v-for="item in columns">
+            <el-table-column
+                v-if="item.type"
+                :type="item.type"
+                :width="item.width"
+                :align="item.align"
+                :fixed="item.fixed"
+                :label="item.label"
+            />
+            <el-table-column
+                v-else
+                :prop="item.name"
+                :width="item.width"
+                :align="item.align"
+                :fixed="item.fixed"
+                :label="item.label"
+            >
+              <template #default="scope">
+                <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
+                <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+      </div>
+      <!-- ------------分页--------------->
       <div class="pagination">
         <el-pagination
             v-model:currentPage="currentPage1"
@@ -182,16 +186,29 @@ const deleteAction = (row) => {
   flex-direction:column;
 
   .header{
+    padding: 16px 16px 0 16px;
+    margin-bottom: 16px;
     display: flex;
+    background: white;
   }
   .footer{
     flex: 1;
     display: flex;
+    padding: 16px;
     flex-direction: column;
     overflow: hidden;
+    background: white;
     .operator{
       margin-bottom: 15px
     }
+    .table{
+      position: relative;
+      flex: 1;
+    }
+    .zb-table{
+      position: absolute;
+      height: 100%;
+    }
   }
   .search-form{
     flex: 1;
diff --git a/src/components/u-info/index.vue b/src/components/u-info/index.vue
index f76362f..94ee146 100644
--- a/src/components/u-info/index.vue
+++ b/src/components/u-info/index.vue
@@ -3,7 +3,7 @@
     <el-popover width="200px" placement="bottom">
       <template #reference>
         <el-badge :value="3" class="item-info-pop">
-          <el-icon class="bell" style="font-size: 22px;"><Bell /></el-icon>
+          <el-icon class="bell" style="font-size: 20px;"><Bell /></el-icon>
         </el-badge>
       </template>
       <div>
diff --git a/src/layout/Header/components/Setting.vue b/src/layout/Header/components/Setting.vue
index abc1f90..3002e3e 100644
--- a/src/layout/Header/components/Setting.vue
+++ b/src/layout/Header/components/Setting.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="m-setting">
     <el-tooltip effect="dark" content="主题设置" placement="bottom">
-      <el-icon  style="font-size: 22px;" class="bell"><Setting @click="changeSwitch('showSetting',true)"/></el-icon>
+      <el-icon  style="font-size: 20px;" class="bell"><Setting @click="changeSwitch('showSetting',true)"/></el-icon>
     </el-tooltip>
   </div>
 </template>
diff --git a/src/layout/Header/components/globalComSize.vue b/src/layout/Header/components/globalComSize.vue
index 8512c3b..8505f6e 100644
--- a/src/layout/Header/components/globalComSize.vue
+++ b/src/layout/Header/components/globalComSize.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dropdown trigger="click" @command="setAssemblySize">
-    <svg-icon class-name="size-icon" icon-class="size" style="font-size: 22px;"/>
+    <svg-icon class-name="size-icon" icon-class="size" style="font-size: 20px;"/>
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item v-for="item in assemblySizeList" :key="item" :disabled="globalComSize === item" :command="item">
diff --git a/src/layout/Main/index.vue b/src/layout/Main/index.vue
index 196e933..e6f3804 100644
--- a/src/layout/Main/index.vue
+++ b/src/layout/Main/index.vue
@@ -32,6 +32,7 @@
     flex: 1;
     display: flex;
     overflow-x: hidden;
+    flex-direction: column;
     width: 100%;
     box-sizing: border-box;
   }
diff --git a/src/main.ts b/src/main.ts
index b7f20db..5c17356 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -21,6 +21,7 @@ import "@/styles/element-dark.scss";
 import UContainerLayout from '@/components/u-container-layout/index.vue'
 
 const app = createApp(App)
+
 app.component('svg-icon',SvgIcon)
 app.component('u-container-layout',UContainerLayout)
 
diff --git a/src/plugins/vxeTable.ts b/src/plugins/vxeTable.ts
new file mode 100644
index 0000000..a27a029
--- /dev/null
+++ b/src/plugins/vxeTable.ts
@@ -0,0 +1,13 @@
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+function useTable (app: App) {
+    app.use(VXETable)
+    // 给 vue 实例挂载内部对象，例如：
+    // app.config.globalProperties.$XModal = VXETable.modal
+    // app.config.globalProperties.$XPrint = VXETable.print
+    // app.config.globalProperties.$XSaveFile = VXETable.saveFile
+    // app.config.globalProperties.$XReadFile = VXETable.readFile
+}
+
+export default useTable
\ No newline at end of file
diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts
index 4da029e..eb286e0 100644
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@@ -15,13 +15,13 @@ const tableRouter = {
     children: [
         {
             path: 'comprehensive',
-            component: () => import('@/views/table/comprehensive.vue'),
+            component: () => import('@/views/table/ComprehensiveTable.vue'),
             name: 'comprehensive',
             meta: { title: '综合表格', keepAlive: true , icon: 'MenuIcon'}
         },
         {
             path: 'inline-table',
-            component: () => import('@/views/table/inline-edit-table.vue'),
+            component: () => import('@/views/table/InlineEditTable.vue'),
             name: 'inline-table',
             meta: { title: '行内编辑', keepAlive: true  , icon: 'MenuIcon'}
         },
@@ -32,10 +32,10 @@ const tableRouter = {
             meta: { title: '可编辑表格', keepAlive: true  , icon: 'MenuIcon'}
         },
         // {
-        //     path: 'multi-table',
-        //     component: () => import('@/views/table/multi-table.vue'),
-        //     name: 'multi-table',
-        //     meta: { title: '多级表头', noCache: true }
+        //     path: 'virtualTable',
+        //     component: () => import('@/views/table/VirtualTable.vue'),
+        //     name: 'virtualTable',
+        //     meta: { title: '虚拟表格', keepAlive: true  , icon: 'MenuIcon'}
         // },
     ]
 }
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 895dce8..2af6145 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,152 +1,150 @@
 <template>
-  <u-container-layout>
-    <div>
-      <el-row class="row-bg" :gutter="10">
-        <el-col :xs="24" :sm="12" :lg="8">
-          <el-card class="box-card" style="height: 100%">
-            <div class="personal">
-              <div>
-                <el-avatar :size="50" :src="circleUrl" />
-              </div>
-              <div class="name"></div>
-              <div class="description"></div>
-              <div class="list">
-                <div>昵称：小狼</div>
-                <div>职业：前端</div>
-                <div>公司：小公司</div>
-                <div>年龄：~~</div>
-                <div>性别：男</div>
-                <div>现住址：中国-浙江-杭州</div>
-                <div>邮箱：1135957121@qq.com</div>
-                <div>微信：19550102670(欢迎加)</div>
-                <div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
-              </div>
-              <el-divider></el-divider>
-              <div style="margin-bottom: 15px"><h5>个性标签</h5></div>
-              <div>
-                <el-tag style="margin-right: 10px">怕麻烦</el-tag>
-                <el-tag style="margin-right: 10px">健身运动</el-tag>
-                <el-tag style="margin-right: 10px">睡觉</el-tag>
-                <el-tag style="margin-right: 10px">漫威</el-tag>
-                <el-tag>向往</el-tag>
-              </div>
-              <el-divider></el-divider>
-              <div style="margin-bottom: 15px"><h5>最喜欢的一句话</h5></div>
-              <div>---------- 开心最重要</div>
-              <el-divider></el-divider>
-              <div style="margin-bottom: 15px"
-                ><h5>如果对你有帮助的话，可以麻烦点一颗 Star、Fork、Watch! 你的鼓励是我继续优化的动力~~</h5></div
-              >
+  <div class="home-container">
+    <el-row class="row-bg" :gutter="10">
+      <el-col :xs="24" :sm="12" :lg="8">
+        <el-card class="box-card" style="height: 100%">
+          <div class="personal">
+            <div>
+              <el-avatar :size="50" :src="circleUrl" />
             </div>
-          </el-card>
-        </el-col>
-        <el-col :xs="24" :sm="12" :lg="16">
-          <el-row class="custom" :gutter="10">
-            <el-col :xs="24" :sm="12" :lg="8">
-              <el-card style="margin-bottom: 10px">
-                <div class="grid-content">
-                  <div class="left"
-                    ><el-icon style="font-size: 24px; color: white"><user /></el-icon
-                  ></div>
-                  <div class="right">
-                    <h2 style="color: #2d8cf0"
-                      ><count-to
-                        :start-val="0"
-                        :end-val="5268"
-                        :duration="2000"
-                        :autoplay="true"
-                      ></count-to
-                    ></h2>
-                    <div>用户访问量 </div>
-                  </div>
+            <div class="name"></div>
+            <div class="description"></div>
+            <div class="list">
+              <div>昵称：小狼</div>
+              <div>职业：前端</div>
+              <div>公司：小公司</div>
+              <div>年龄：~~</div>
+              <div>性别：男</div>
+              <div>现住址：中国-浙江-杭州</div>
+              <div>邮箱：1135957121@qq.com</div>
+              <div>微信：19550102670(欢迎加)</div>
+              <div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
+            </div>
+            <el-divider></el-divider>
+            <div style="margin-bottom: 15px"><h5>个性标签</h5></div>
+            <div>
+              <el-tag style="margin-right: 10px">怕麻烦</el-tag>
+              <el-tag style="margin-right: 10px">健身运动</el-tag>
+              <el-tag style="margin-right: 10px">睡觉</el-tag>
+              <el-tag style="margin-right: 10px">漫威</el-tag>
+              <el-tag>向往</el-tag>
+            </div>
+            <el-divider></el-divider>
+            <div style="margin-bottom: 15px"><h5>最喜欢的一句话</h5></div>
+            <div>---------- 开心最重要</div>
+            <el-divider></el-divider>
+            <div style="margin-bottom: 15px"
+            ><h5>如果对你有帮助的话，可以麻烦点一颗 Star、Fork、Watch! 你的鼓励是我继续优化的动力~~</h5></div
+            >
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :lg="16">
+        <el-row class="custom" :gutter="10">
+          <el-col :xs="24" :sm="12" :lg="8">
+            <el-card style="margin-bottom: 10px">
+              <div class="grid-content">
+                <div class="left"
+                ><el-icon style="font-size: 24px; color: white"><user /></el-icon
+                ></div>
+                <div class="right">
+                  <h2 style="color: #2d8cf0"
+                  ><count-to
+                      :start-val="0"
+                      :end-val="5268"
+                      :duration="2000"
+                      :autoplay="true"
+                  ></count-to
+                  ></h2>
+                  <div>用户访问量 </div>
                 </div>
-              </el-card>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="8">
-              <el-card style="margin-bottom: 10px">
-                <div class="grid-content">
-                  <div class="left" style="background: #64d572"
-                    ><el-icon style="font-size: 24px; color: white"><user /></el-icon
-                  ></div>
-                  <div class="right">
-                    <h2 style="color: #64d572"
-                      ><count-to
-                        :start-val="0"
-                        :end-val="9599"
-                        :duration="2000"
-                        :autoplay="true"
-                      ></count-to
-                    ></h2>
-                    <div>系统消息 </div>
-                  </div>
-                </div>
-              </el-card>
-            </el-col>
-            <el-col :xs="24" :sm="12" :lg="8">
-              <el-card style="margin-bottom: 10px">
-                <div class="grid-content">
-                  <div class="left" style="background: #f25e43"
-                    ><el-icon style="font-size: 24px; color: white"><user /></el-icon
-                  ></div>
-                  <div class="right">
-                    <h2 style="color: #f25e43"
-                      ><count-to
-                        :start-val="0"
-                        :end-val="595453"
-                        :duration="2000"
-                        :autoplay="true"
-                      ></count-to
-                    ></h2>
-                    <div>数量 </div>
-                  </div>
-                </div>
-              </el-card>
-            </el-col>
-          </el-row>
-          <el-card class="box-card">
-            <template #header>
-              <div class="card-header">
-                <span>系列开源产品</span>
               </div>
-            </template>
-            <div style="display: flex">
-              <el-card
+            </el-card>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="8">
+            <el-card style="margin-bottom: 10px">
+              <div class="grid-content">
+                <div class="left" style="background: #64d572"
+                ><el-icon style="font-size: 24px; color: white"><user /></el-icon
+                ></div>
+                <div class="right">
+                  <h2 style="color: #64d572"
+                  ><count-to
+                      :start-val="0"
+                      :end-val="9599"
+                      :duration="2000"
+                      :autoplay="true"
+                  ></count-to
+                  ></h2>
+                  <div>系统消息 </div>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :xs="24" :sm="12" :lg="8">
+            <el-card style="margin-bottom: 10px">
+              <div class="grid-content">
+                <div class="left" style="background: #f25e43"
+                ><el-icon style="font-size: 24px; color: white"><user /></el-icon
+                ></div>
+                <div class="right">
+                  <h2 style="color: #f25e43"
+                  ><count-to
+                      :start-val="0"
+                      :end-val="595453"
+                      :duration="2000"
+                      :autoplay="true"
+                  ></count-to
+                  ></h2>
+                  <div>数量 </div>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+        <el-card class="box-card">
+          <template #header>
+            <div class="card-header">
+              <span>系列开源产品</span>
+            </div>
+          </template>
+          <div style="display: flex">
+            <el-card
                 style="flex: 1; margin-right: 20px; cursor: pointer"
                 class="card-item"
                 @click="goTo('https://ext.dcloud.net.cn/plugin?id=7511')"
+            >
+              <div style="color: white; margin-bottom: 10px"><h3>zb-table</h3></div>
+              <div style="font-size: 12px; color: white"
+              >uniapp 表格组件
+                支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端</div
               >
-                <div style="color: white; margin-bottom: 10px"><h3>zb-table</h3></div>
-                <div style="font-size: 12px; color: white"
-                  >uniapp 表格组件
-                  支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端</div
-                >
-              </el-card>
-              <el-card
+            </el-card>
+            <el-card
                 style="flex: 1; cursor: pointer"
                 class="card-item"
                 @click="goTo('https://github.com/zouzhibin/vue-admin-perfect')"
+            >
+              <div style="color: white; margin-bottom: 10px"><h3>vue-admin-perfect</h3></div>
+              <div style="font-size: 12px; color: white"
+              >系统基于vue3+vuex+ element-plus+ts后台管理系统</div
               >
-                <div style="color: white; margin-bottom: 10px"><h3>vue-admin-perfect</h3></div>
-                <div style="font-size: 12px; color: white"
-                  >系统基于vue3+vuex+ element-plus+ts后台管理系统</div
-                >
-              </el-card>
+            </el-card>
+          </div>
+        </el-card>
+        <el-card class="box-card">
+          <template #header>
+            <div class="card-header">
+              <span>每周用户活跃量</span>
             </div>
-          </el-card>
-          <el-card class="box-card">
-            <template #header>
-              <div class="card-header">
-                <span>每周用户活跃量</span>
-              </div>
-            </template>
-            <div>
-              <bar-charts height="300px" width="100%" id="bar1"></bar-charts>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>
-  </u-container-layout>
+          </template>
+          <div>
+            <bar-charts height="300px" width="100%" id="bar1"></bar-charts>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 <script setup lang="ts">
   import { User } from '@element-plus/icons-vue'
@@ -220,4 +218,11 @@
   .card-item {
     background: linear-gradient(50deg, #1890ff, #77e19d);
   }
+  .home-container{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 16px;
+    box-sizing: border-box;
+  }
 </style>
diff --git a/src/views/other/grid-sorter.vue b/src/views/other/grid-sorter.vue
index 428ad2f..817d27e 100644
--- a/src/views/other/grid-sorter.vue
+++ b/src/views/other/grid-sorter.vue
@@ -1,16 +1,18 @@
 <template>
   <u-container-layout class="row">
     <div style="margin-bottom: 10px">卡片拖拽排序</div>
-    <el-button class="btn" @click="sorter" type="primary" style="margin-bottom: 20px"
+    <div style="display: flex;align-items: center">
+      <el-button class="btn" @click="sorter" type="primary" style="margin-bottom: 20px"
       >还原</el-button
-    >
-    <el-button
-      class="btn"
-      @click="getDataAction"
-      type="primary"
-      style="margin-bottom: 20px; margin-left: 20px"
+      >
+      <el-button
+          class="btn"
+          @click="getDataAction"
+          type="primary"
+          style="margin-bottom: 20px; margin-left: 20px"
       >获取数据</el-button
-    >
+      >
+    </div>
     <div class="col-6" style="">
       <el-row :gutter="10">
         <draggable
diff --git a/src/views/table/ComprehensiveTable.vue b/src/views/table/ComprehensiveTable.vue
new file mode 100644
index 0000000..882db4e
--- /dev/null
+++ b/src/views/table/ComprehensiveTable.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="app-container" ref="appContainer">
+    <PropTable
+        :loading="loading"
+        @selection-change="selectionChange"
+        :columns="column"
+        :data="list"
+        @reset="reset"
+        @onSubmit="onSubmit"
+    >
+      <template v-slot:btn>
+        <div style="display: flex; justify-content: flex-end">
+          <el-button type="primary" @click="add"
+          ><el-icon><plus /></el-icon> 添加</el-button
+          >
+          <el-button type="danger" @click="batchDelete"
+          ><el-icon><delete /></el-icon>删除</el-button
+          >
+        </div>
+      </template>
+      <template v-slot:sex="scope">{{ scope.row.sex ? '男' : '女' }}</template>
+      <template v-slot:operation="scope">
+        <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
+          编辑
+        </el-button>
+        <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
+          删除
+        </el-button>
+      </template>
+    </PropTable>
+
+    <el-dialog v-model="dialogVisible" :title="title" width="50%">
+      <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+          class="demo-ruleForm"
+          :size="formSize"
+      >
+        <el-form-item label="活动名称" prop="name">
+          <el-input v-model="ruleForm.name" />
+        </el-form-item>
+        <el-form-item label="性别" prop="sex">
+          <el-radio-group v-model="ruleForm.sex">
+            <el-radio :label="1">男</el-radio>
+            <el-radio :label="0">女</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="价格" prop="price">
+          <el-input v-model="ruleForm.price" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="dialogVisible = false">取消</el-button>
+            <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
+          </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup name="comprehensive">
+import {ref, reactive, onMounted, nextTick} from 'vue'
+import * as dayjs from 'dayjs'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+const loading = ref(true)
+const appContainer = ref(null)
+import PropTable from '@/components/Table/PropTable/index.vue'
+const data = []
+for (let i = 0; i < 100; i++) {
+  data.push({
+    date: '2016-05-02',
+    name: '王五' + i,
+    price: 1 + i,
+    province: '上海',
+    admin: 'admin',
+    sex: i % 2 ? 1 : 0,
+    checked: true,
+    id: i + 1,
+    age: 0,
+    city: '普陀区',
+    address: '上海市普上海',
+    zip: 200333,
+  })
+}
+const column = [
+  { type: 'selection', width: 60 ,fixed: 'left'},
+  { name: 'id', label: 'id', width: 80,fixed: 'left' },
+  { name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80 },
+  { name: 'age', label: '年龄', align: 'right' },
+  {
+    name: 'sex',
+    label: '性别',
+    slot: true,
+    inSearch: true,
+    options: [
+      {
+        value: 1,
+        label: '男',
+      },
+      {
+        value: 0,
+        label: '女',
+      },
+    ],
+    valueType: 'select',
+  },
+  {
+    name: 'price',
+    label: '价格',
+    inSearch: true,
+    valueType: 'input',
+  },
+  { name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
+  { name: 'address', label: '地址', inSearch: true, valueType: 'input' },
+  { name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input' },
+  { name: 'province', label: '省份' },
+  { name: 'city', label: '城市' },
+  { name: 'zip', label: '邮编' },
+  { name: 'operation', slot: true, fixed: 'right', width: 200,label: '操作'  },
+]
+const list = ref(data)
+
+const formSize = ref('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive({
+  name: '',
+  sex: null,
+  price: null,
+})
+
+const rules = reactive({
+  name: [
+    { required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
+    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
+  ],
+  price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
+  sex: [
+    {
+      required: true,
+      message: '请选择性别',
+      trigger: 'change',
+    },
+  ],
+})
+
+const dialogVisible = ref(false)
+const title = ref('新增')
+const rowObj = ref({})
+const selectObj = ref([])
+
+const handleClose = async (done: () => void) => {
+  await ruleFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      let obj = {
+        id: Date.now(),
+        ...ruleForm,
+        age: 0,
+        city: '普陀区',
+        address: '上海市普上海',
+        zip: 200333,
+        province: '上海',
+        admin: 'admin',
+        date: dayjs().format('YYYY-MM-DD'),
+      }
+      if (title.value === '新增') {
+        list.value = [obj, ...list.value]
+        ElMessage.success('添加成功')
+      } else {
+        list.value.forEach((item) => {
+          if (item.id === rowObj.value.id) {
+            item.name = obj.name
+            item.sex = obj.sex
+            item.price = obj.price
+          }
+        })
+      }
+      dialogVisible.value = false
+      console.log('submit!', obj)
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+const add = () => {
+  title.value = '新增'
+  dialogVisible.value = true
+}
+
+const batchDelete = () => {
+  if (!selectObj.value.length) {
+    return ElMessage.error('未选中任何行')
+  }
+  ElMessageBox.confirm('你确定要删除选中项吗?', '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+      .then(() => {
+        ElMessage.success('模拟删除成功')
+        list.value = list.value.concat([])
+      })
+      .catch(() => {})
+}
+const selectionChange = (val) => {
+  selectObj.value = val
+}
+
+const edit = (row) => {
+  title.value = '编辑'
+  rowObj.value = row
+  dialogVisible.value = true
+  ruleForm.name = row.name
+  ruleForm.sex = row.sex
+  ruleForm.price = row.price
+}
+
+const del = (row) => {
+  console.log('row==', row)
+  ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    draggable: true,
+  })
+      .then(() => {
+        list.value = list.value.filter((item) => item.id !== row.id)
+        ElMessage.success('删除成功')
+        loading.value = true
+        setTimeout(() => {
+          loading.value = false
+        }, 500)
+      })
+      .catch(() => {})
+}
+
+const reset = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+  ElMessage.success('触发重置方法')
+}
+
+const onSubmit = (val) => {
+  console.log('val===', val)
+  ElMessage.success('触发查询方法')
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+}
+
+const getHeight = ()=>{
+
+}
+
+onMounted(() => {
+  nextTick(()=>{
+    // let data = appContainer.value.
+  })
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+})
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.app-container{
+  flex: 1;
+  display: flex;
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>
diff --git a/src/views/table/inline-edit-table.vue b/src/views/table/InlineEditTable.vue
similarity index 100%
rename from src/views/table/inline-edit-table.vue
rename to src/views/table/InlineEditTable.vue
diff --git a/src/views/table/VirtualTable.vue b/src/views/table/VirtualTable.vue
new file mode 100644
index 0000000..b3cf09c
--- /dev/null
+++ b/src/views/table/VirtualTable.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div>
+      <el-button @click="loadList(50)">50条</el-button>
+      <el-button @click="loadList(100)">100条</el-button>
+      <el-button @click="loadList(1000)">1k条</el-button>
+      <el-button @click="loadList(5000)">5k条</el-button>
+      <el-button @click="loadList(10000)">1w条</el-button>
+      <el-button @click="loadList(50000)">5w条</el-button>
+      <el-button @click="loadList(100000)">10w条</el-button>
+      <el-button @click="loadList(300000)">30w条</el-button>
+    </div>
+    <vxe-table
+        border
+        show-overflow
+        show-header-overflow
+        ref="xTable"
+        height="600"
+        :column-config="{resizable: true}"
+        :loading="demo1.loading"
+        :scroll-y="{mode: 'wheel'}">
+      <vxe-column type="seq" width="100"  ></vxe-column>
+      <vxe-column field="attr0" title="Attr0" width="200" fixed="left" sortable></vxe-column>
+      <vxe-column field="attr1" title="Attr1" width="200"></vxe-column>
+      <vxe-column field="attr2" title="Attr2" width="200"></vxe-column>
+      <vxe-column field="attr3" title="Attr3" width="200"></vxe-column>
+      <vxe-column field="attr4" title="Attr4" width="120"></vxe-column>
+      <vxe-column field="attr5" title="Attr5" width="200"></vxe-column>
+      <vxe-column field="attr6" title="Attr6" width="300" sortable></vxe-column>
+      <vxe-column field="attr7" title="Attr7" width="200" sortable></vxe-column>
+      <vxe-column field="attr8" title="Attr8" width="220"></vxe-column>
+      <vxe-column field="attr9" title="Attr9" width="200"></vxe-column>
+      <vxe-column field="attr10" title="Attr10" width="130"></vxe-column>
+      <vxe-column field="attr11" title="Attr11" width="200"></vxe-column>
+      <vxe-column field="attr12" title="Attr12" width="100"></vxe-column>
+      <vxe-column field="attr13" title="Attr14" width="200"></vxe-column>
+      <vxe-column field="attr14" title="Attr14" width="300"></vxe-column>
+      <vxe-column field="attr15" title="Attr15" width="200"></vxe-column>
+      <vxe-column field="attr16" title="Attr16" width="200"></vxe-column>
+      <vxe-column field="attr17" title="Attr17" width="80"></vxe-column>
+      <vxe-column field="attr18" title="Attr18" width="200"></vxe-column>
+      <vxe-column field="attr19" title="Attr19" width="140"></vxe-column>
+      <vxe-column field="attr20" title="Attr20" width="200"></vxe-column>
+      <vxe-column field="attr21" title="Attr21" width="160"></vxe-column>
+      <vxe-column field="attr22" title="Attr22" width="200"></vxe-column>
+      <vxe-column field="attr23" title="Attr23" width="200"></vxe-column>
+      <vxe-column field="attr24" title="Attr24" width="100" fixed="right"></vxe-column>
+      <vxe-column field="attr25" title="Attr25" width="200" fixed="right"></vxe-column>
+    </vxe-table>
+  </div>
+</template>
+<script lang="ts" setup>
+import { defineComponent, ref, onMounted, nextTick,reactive } from 'vue'
+import { VXETable, VxeTableInstance } from 'vxe-table'
+import XEUtils from 'xe-utils'
+const dataList: any[] = []
+const demo1 = reactive({
+  loading: false,
+  tableData: []
+})
+const mockList = (rowSize: number): Promise<any[]> => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const currSize = dataList.length
+      if (currSize < rowSize) {
+        for (let i = currSize; i < rowSize; i++) {
+          dataList.push({
+            checked: false,
+            attr0: 'attr0_row_' + i,
+            attr1: 'attr1_row_' + i,
+            attr2: 'attr2_row_' + i,
+            attr3: 'attr3_row_' + i,
+            attr4: 'attr4_row_' + i,
+            attr5: 'attr5_row_' + i,
+            attr6: i,
+            attr7: '' + i,
+            attr8: 'attr8_row_' + i,
+            attr9: 'attr9_row_' + i,
+            attr10: 'attr10_row_' + i,
+            attr11: 'attr11_row_' + i,
+            attr12: 'attr12_row_' + i,
+            attr13: 'attr13_row_' + i,
+            attr14: 'attr14_row_' + i,
+            attr15: 'attr15_row_' + i,
+            attr16: 'attr16_row_' + i,
+            attr19: 'attr19_row_' + i,
+            attr20: 'attr20_row_' + i,
+            attr24: 'attr24_row_' + i,
+            attr25: 'attr25_row_' + i
+          })
+        }
+      }
+      const result = XEUtils.clone(dataList.slice(0, rowSize), true)
+      resolve(result)
+    }, 100)
+  })
+}
+
+
+const xTable = ref<VxeTableInstance>()
+const loadList = (rowSize: number) => {
+  demo1.loading = true
+  mockList(rowSize).then(data => {
+    const startTime = Date.now()
+    const $table = xTable.value
+    // 使用函数式加载
+    if ($table) {
+      $table.reloadData(data).then(() => {
+        VXETable.modal.message({ content: `渲染 ${rowSize} 行，用时 ${Date.now() - startTime}毫秒`, status: 'info' })
+        demo1.loading = false
+      })
+    } else {
+      demo1.loading = false
+    }
+  })
+}
+
+onMounted(() => {
+  nextTick(() => {
+    loadList(100)
+  })
+})
+</script>
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/table/complex.vue b/src/views/table/complex.vue
deleted file mode 100644
index 78e546c..0000000
--- a/src/views/table/complex.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <div class="app-container">
-    <comprehensive :columns="column" :data="data" @reset="reset" @onSubmit="onSubmit">
-      <template v-slot:btn>
-        <div style="display: flex; justify-content: flex-end">
-          <el-button type="primary"
-            ><el-icon><plus /></el-icon> 添加</el-button
-          >
-          <el-button type="danger"
-            ><el-icon><delete /></el-icon>删除</el-button
-          >
-        </div>
-      </template>
-      <template v-slot:sex="scope">{{ scope.row.sex ? '男' : '女' }}</template>
-      <template v-slot:operation="scope">
-        <el-button type="primary" size="small" icon="Edit"> 编辑 </el-button>
-        <el-button type="danger" size="small" icon="Delete"> 删除 </el-button>
-      </template>
-    </comprehensive>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import { ElMessage } from 'element-plus'
-  import Comprehensive from './components/comprehensive.vue'
-  const data = []
-  for (let i = 0; i < 100; i++) {
-    data.push({
-      date: '2016-05-02',
-      name: '王五' + i,
-      price: 1 + i,
-      province: '上海',
-      admin: 'admin',
-      sex: i % 2 ? 1 : 0,
-      checked: true,
-      id: i + 1,
-      age: 0,
-      city: '普陀区',
-      address: '上海市普上海',
-      zip: 200333,
-    })
-  }
-  const column = [
-    { type: 'selection', width: 60 },
-    { name: 'id', label: 'id', width: 80 },
-    { name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80 },
-    { name: 'age', label: '年龄', align: 'right' },
-    {
-      name: 'sex',
-      label: '性别',
-      slot: true,
-      inSearch: true,
-      options: [
-        {
-          value: 1,
-          label: '男',
-        },
-        {
-          value: 0,
-          label: '女',
-        },
-      ],
-      valueType: 'select',
-    },
-    {
-      name: 'price',
-      label: '价格',
-      inSearch: true,
-      valueType: 'input',
-    },
-    { name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
-    { name: 'address', label: '地址', inSearch: true, valueType: 'input' },
-    { name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input' },
-    { name: 'province', label: '省份' },
-    { name: 'city', label: '城市' },
-    { name: 'zip', label: '邮编' },
-    { name: 'operation', slot: true, fixed: 'right', width: 200 },
-  ]
-
-  const reset = () => {
-    ElMessage.success('触发重置方法')
-  }
-  const onSubmit = (val) => {
-    console.log('val===', val)
-    ElMessage.success('触发查询方法')
-  }
-</script>
-<style scoped>
-  .edit-input {
-    padding-right: 100px;
-  }
-  .cancel-btn {
-    position: absolute;
-    right: 15px;
-    top: 10px;
-  }
-</style>
diff --git a/src/views/table/components/comprehensive.vue b/src/views/table/components/comprehensive.vue
deleted file mode 100644
index eb1e688..0000000
--- a/src/views/table/components/comprehensive.vue
+++ /dev/null
@@ -1,218 +0,0 @@
-<template>
-  <div class="inline-edit-table">
-    <div class="header">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline search-form" ref="ruleFormRef" >
-        <template v-for="(item, index) in formSearchData" :key="index">
-          <el-form-item :label="item.label" v-show="isExpand ? isExpand : index < 2">
-            <template v-if="item.valueType === 'input'">
-              <el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
-            </template>
-            <template v-if="item.valueType === 'select'">
-              <el-select v-model="formInline[item.name]" :placeholder="`请选择${item.label}`">
-                <el-option
-                    v-for="ite in item.options"
-                    :key="ite.value"
-                    :label="ite.label"
-                    :value="ite.value"
-                />
-              </el-select>
-            </template>
-          </el-form-item>
-        </template>
-      </el-form>
-     <div class="search">
-       <el-button type="primary" @click="onSubmit"  :icon="Search">查询</el-button>
-       <el-button @click="reset(ruleFormRef)">重置</el-button>
-       <el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
-           <arrow-down v-if="!isExpand" />
-           <arrow-up v-else /> </el-icon
-         ></el-button>
-     </div>
-    </div>
-      <!----------底部---------------------->
-    <div class="footer">
-      <!-----------工具栏操作工具----------------->
-      <div class="operator">
-        <slot name="btn"></slot>
-      </div>
-      <!-- ------------表格--------------->
-      <el-table
-          height="585"
-          v-loading="loading"
-          @selection-change="(val) => emit('selection-change', val)"
-          :data="list"
-          :border="true"
-      >
-        <template v-for="item in columns">
-          <el-table-column
-              v-if="item.type"
-              :type="item.type"
-              :width="item.width"
-              :align="item.align"
-              :fixed="item.fixed"
-              :label="item.label"
-          />
-          <el-table-column
-              v-else
-              :prop="item.name"
-              :width="item.width"
-              :align="item.align"
-              :fixed="item.fixed"
-              :label="item.label"
-          >
-            <template #default="scope">
-              <span v-if="!item.slot">{{ scope.row[item.name] }}</span>
-              <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
-            </template>
-          </el-table-column>
-        </template>
-      </el-table>
-      <div class="pagination">
-        <el-pagination
-            v-model:currentPage="currentPage1"
-            :page-size="10"
-            background
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="data.length"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { computed, ref } from 'vue'
-  import {Search } from '@element-plus/icons-vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  import type { FormInstance } from 'element-plus'
-  const ruleFormRef = ref<FormInstance>()
-  const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
-  let props = defineProps({
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-  })
-
-  const currentPage1 = ref(1)
-  // 收缩展开
-  const isExpand = ref(false)
-  const handleSizeChange = (val: number) => {
-    console.log(`${val} items per page`)
-  }
-  const handleCurrentChange = (val: number) => {
-    console.log(`current page: ${val}`)
-    currentPage1.value = val
-  }
-
-  const list = computed(() => {
-    let arr = JSON.parse(JSON.stringify(props.data))
-    return arr.splice((currentPage1.value - 1) * 10, 10)
-  })
-
-  const listLoading = ref(false)
-  const confirmEdit = (row) => {
-    row.edit = false
-  }
-  const cancelEdit = (row) => {
-    row.edit = false
-  }
-
-  import { reactive } from 'vue'
-
-  let obj = {}
-  let search = []
-  for (let item of props.columns) {
-    if (item.inSearch) {
-      obj[item.name] = null
-    }
-    if (item.inSearch) {
-      search.push(item)
-    }
-  }
-  const formSearchData = ref(search)
-  const formInline = reactive(obj)
-
-  const onSubmit = () => {
-    console.log('submit!', formInline)
-    emit('onSubmit', formInline)
-  }
-
-  const reset = (formEl: FormInstance | undefined) => {
-    formSearchData.value.forEach((item) => {
-      formInline[item.name] = null
-    })
-    emit('reset')
-  }
-  const deleteAction = (row) => {
-    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-      draggable: true,
-    })
-      .then(() => {
-        list.value = list.value.filter((item) => item.id !== row.id)
-        ElMessage.success('删除成功')
-      })
-      .catch(() => {})
-  }
-</script>
-<style scoped lang="scss">
-  .edit-input {
-    padding-right: 100px;
-  }
-  .cancel-btn {
-    position: absolute;
-    right: 15px;
-    top: 10px;
-  }
-  .inline-edit-table {
-    width: 100%;
-    height: 100%;
-    display:flex;
-    flex-direction:column;
-
-    .header{
-      display: flex;
-    }
-    .footer{
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      .operator{
-        margin-bottom: 15px
-      }
-    }
-    .search-form{
-      flex: 1;
-    }
-    .search{
-      white-space: nowrap;
-    }
-
-    ::v-deep{
-      .el-table__header th{
-        font-size: 15px;
-        font-weight: 700;
-        color: #252525;
-      }
-    }
-    .pagination{
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      padding-top: 20px;
-      box-sizing: border-box;
-    }
-  }
-</style>
diff --git a/src/views/table/components/edit.vue b/src/views/table/components/edit.vue
deleted file mode 100644
index 05046e9..0000000
--- a/src/views/table/components/edit.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<template>
-  <div class="m-edit-table">
-    <div style="margin-top: 15px; margin-bottom: 15px" v-if="mode !== 'hide' && mode !== 'bottom'">
-      <el-button style="width: 100%" @click="add">
-        <el-icon style="margin-right: 4px"><plus /></el-icon> 添加一行数据</el-button
-      >
-    </div>
-    <el-table :data="transData" style="width: 100%" row-key="id" border>
-      <template v-for="item in columns">
-        <el-table-column
-          v-if="item.type"
-          :type="item.type"
-          :width="item.width"
-          :align="item.align"
-          :fixed="item.fixed"
-          :label="item.label"
-        />
-        <el-table-column
-          v-else
-          :prop="item.name"
-          :width="item.width"
-          :align="item.align"
-          :fixed="item.fixed"
-          :label="item.label"
-        >
-          <template #default="scope">
-            <template v-if="!item.slot">
-              <template v-if="item.readonly">
-                {{ scope.row[item.name] }}
-              </template>
-              <template v-else-if="item.valueType === 'select'">
-                <el-select
-                  clearable
-                  :placeholder="`请选择`"
-                  v-model="scope.row[item.name]"
-                  v-if="scope.row.edit"
-                >
-                  <el-option
-                    v-for="ite in item.options"
-                    :key="ite.value"
-                    :label="ite.label"
-                    :value="ite.value"
-                  />
-                </el-select>
-
-                <span v-else>{{ filterOption(item, scope) }}</span>
-              </template>
-
-              <template v-else-if="item.valueType === 'date'">
-                <el-date-picker
-                  v-model="scope.row[item.name]"
-                  type="date"
-                  clearable
-                  placeholder="请选择"
-                  v-if="scope.row.edit"
-                />
-                <span v-else>{{ scope.row[item.name] || '--' }}</span>
-              </template>
-              <template v-else>
-                <el-input
-                  clearable
-                  placeholder="请输入"
-                  v-model="scope.row[item.name]"
-                  v-if="scope.row.edit"
-                ></el-input>
-                <span v-else>{{ scope.row[item.name] || '--' }}</span>
-              </template>
-            </template>
-            <slot v-else :name="item.name" :item="item" :row="scope.row"></slot>
-          </template>
-        </el-table-column>
-      </template>
-      <el-table-column prop="operator" label="操作" width="250px" fixed="right">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.edit"
-            type="success"
-            size="small"
-            icon="CircleCheckFilled"
-            @click="confirmEdit(scope.row)"
-          >
-            保存
-          </el-button>
-          <el-button
-            v-else
-            type="primary"
-            size="small"
-            icon="Edit"
-            @click="scope.row.edit = !scope.row.edit"
-          >
-            编辑
-          </el-button>
-          <el-popover
-            trigger="click"
-            v-model:visible="scope.row.visible"
-            placement="top"
-            :width="160"
-          >
-            <p style="display: flex; align-items: center; margin-bottom: 10px">
-              <el-icon color="#faad14" style="margin-right: 10px"><warning-filled /></el-icon>
-              删除此行？</p
-            >
-            <div style="text-align: right; margin: 0">
-              <el-button size="small" @click="scope.row.visible = false">取消</el-button>
-              <el-button size="small" type="primary" @click="deleteAction(scope.row)"
-                >确定</el-button
-              >
-            </div>
-            <template #reference>
-              <el-button icon="Delete" @click="scope.row.visible = true" type="danger" size="small"
-                >删除</el-button
-              >
-            </template>
-          </el-popover>
-          <el-button
-            v-if="scope.row.edit"
-            type="primary"
-            size="small"
-            icon="Edit"
-            @click="cancelEdit(scope.row)"
-          >
-            取消
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div style="margin-top: 15px" v-if="mode !== 'hide' && mode !== 'top'">
-      <el-button style="width: 100%" @click="add">
-        <el-icon style="margin-right: 4px"><plus /></el-icon> 添加一行数据</el-button
-      >
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { computed, onMounted, ref, watch } from 'vue'
-  import { deepObjClone } from '@/utils/index'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  import { reactive } from 'vue'
-  const emit = defineEmits(['del', 'add', 'onChange'])
-  let transData = ref([])
-
-  let props = defineProps({
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    editableKeys: {
-      type: Array,
-      default: () => [],
-    },
-    mode: {
-      type: String,
-      default: 'bottom',
-    },
-  })
-  const getData = () => {
-    let arr = deepObjClone(transData.value)
-    for (let item of arr) {
-      for (let attr in item) {
-        if (attr.includes('te__mp')) {
-          delete item[attr]
-        }
-      }
-    }
-    emit('onChange', arr)
-  }
-
-  let obj = {}
-  for (let item of props.columns) {
-    props.data.forEach((it) => {
-      if (!obj[item.name]) {
-        obj[item.name] = null
-      }
-    })
-  }
-
-  const reset = () => {
-    transData.value = props.data
-    getData()
-  }
-
-  onMounted(() => {
-    watch(
-      () => props.data,
-      (val) => {
-        // // 转换数据
-        transData.value = deepObjClone(val)
-        // 存储一个临时变量
-        for (let item of transData.value) {
-          if (props.editableKeys.includes(item.id)) {
-            item.edit = true
-          }
-
-          for (let attr in item) {
-            let temp = `${attr}te__mp`
-            item[temp] = item[attr]
-          }
-        }
-        // console.log('transData',transData)
-      },
-      {
-        immediate: true,
-        deep: true,
-      },
-    )
-  })
-
-  const visible = ref(false)
-
-  const handleSizeChange = (val: number) => {
-    console.log(`${val} items per page`)
-  }
-
-  const listLoading = ref(false)
-
-  // 保存
-  const confirmEdit = (row) => {
-    row.edit = false
-    for (let attr in row) {
-      if (attr.includes('te__mp')) {
-        row[attr] = row[attr.replace('te__mp', '')]
-      }
-    }
-    getData()
-  }
-  // 取消
-  const cancelEdit = (row) => {
-    row.edit = !row.edit
-    for (let attr in row) {
-      if (attr !== 'edit') {
-        if (!attr.includes('te__mp')) {
-          row[attr] = row[attr + 'te__mp']
-        }
-      }
-    }
-  }
-
-  const deleteAction = (row) => {
-    row.visible = false
-    transData.value = transData.value.filter((item) => item.id !== row.id)
-    emit('del', row)
-  }
-
-  const add = () => {
-    let id = ~~(Math.random() * 1000000).toFixed(0)
-    let obj1 = Object.assign({}, obj, {
-      id: id,
-      edit: true,
-      visible: false,
-    })
-
-    for (let attr in obj1) {
-      let temp = `${attr}te__mp`
-      obj1[temp] = obj1[attr]
-    }
-
-    if (props.mode === 'bottom') {
-      transData.value.push(obj1)
-    }
-    if (props.mode === 'top') {
-      transData.value.unshift(obj1)
-    }
-  }
-
-  const filterOption = (item, scope) => {
-    let obj = item.options.find((ite) => ite.value === scope.row[item.name])
-    if (obj) {
-      return obj.label
-    }
-    return '--'
-  }
-
-  defineExpose({
-    reset,
-  })
-</script>
-<style scoped>
-  .edit-input {
-    padding-right: 100px;
-  }
-  .cancel-btn {
-    position: absolute;
-    right: 15px;
-    top: 10px;
-  }
-  .inline-edit-table {
-    width: 100%;
-  }
-</style>
diff --git a/src/views/table/comprehensive.vue b/src/views/table/comprehensive.vue
deleted file mode 100644
index d8527c7..0000000
--- a/src/views/table/comprehensive.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template>
-  <u-container-layout>
-    <div class="app-container" ref="appContainer">
-      <PropTable
-          :loading="loading"
-          @selection-change="selectionChange"
-          :columns="column"
-          :data="list"
-          @reset="reset"
-          @onSubmit="onSubmit"
-      >
-        <template v-slot:btn>
-          <div style="display: flex; justify-content: flex-end">
-            <el-button type="primary" @click="add"
-            ><el-icon><plus /></el-icon> 添加</el-button
-            >
-            <el-button type="danger" @click="batchDelete"
-            ><el-icon><delete /></el-icon>删除</el-button
-            >
-          </div>
-        </template>
-        <template v-slot:sex="scope">{{ scope.row.sex ? '男' : '女' }}</template>
-        <template v-slot:operation="scope">
-          <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
-            编辑
-          </el-button>
-          <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
-            删除
-          </el-button>
-        </template>
-      </PropTable>
-
-      <el-dialog v-model="dialogVisible" :title="title" width="50%">
-        <el-form
-            ref="ruleFormRef"
-            :model="ruleForm"
-            :rules="rules"
-            label-width="120px"
-            class="demo-ruleForm"
-            :size="formSize"
-        >
-          <el-form-item label="活动名称" prop="name">
-            <el-input v-model="ruleForm.name" />
-          </el-form-item>
-          <el-form-item label="性别" prop="sex">
-            <el-radio-group v-model="ruleForm.sex">
-              <el-radio :label="1">男</el-radio>
-              <el-radio :label="0">女</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="价格" prop="price">
-            <el-input v-model="ruleForm.price" />
-          </el-form-item>
-        </el-form>
-        <template #footer>
-          <span class="dialog-footer">
-            <el-button @click="dialogVisible = false">取消</el-button>
-            <el-button type="primary" @click="handleClose(ruleFormRef)">确定</el-button>
-          </span>
-        </template>
-      </el-dialog>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup name="comprehensive">
-import {ref, reactive, onMounted, nextTick} from 'vue'
-  import * as dayjs from 'dayjs'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  import type { FormInstance } from 'element-plus'
-  const loading = ref(true)
-  const appContainer = ref(null)
-  import PropTable from '@/components/Table/PropTable/index.vue'
-  const data = []
-  for (let i = 0; i < 100; i++) {
-    data.push({
-      date: '2016-05-02',
-      name: '王五' + i,
-      price: 1 + i,
-      province: '上海',
-      admin: 'admin',
-      sex: i % 2 ? 1 : 0,
-      checked: true,
-      id: i + 1,
-      age: 0,
-      city: '普陀区',
-      address: '上海市普上海',
-      zip: 200333,
-    })
-  }
-  const column = [
-    { type: 'selection', width: 60 },
-    { name: 'id', label: 'id', width: 80 },
-    { name: 'name', label: '姓名', inSearch: true, valueType: 'input', width: 80 },
-    { name: 'age', label: '年龄', align: 'right' },
-    {
-      name: 'sex',
-      label: '性别',
-      slot: true,
-      inSearch: true,
-      options: [
-        {
-          value: 1,
-          label: '男',
-        },
-        {
-          value: 0,
-          label: '女',
-        },
-      ],
-      valueType: 'select',
-    },
-    {
-      name: 'price',
-      label: '价格',
-      inSearch: true,
-      valueType: 'input',
-    },
-    { name: 'admin', label: '账号', inSearch: true, valueType: 'input' },
-    { name: 'address', label: '地址', inSearch: true, valueType: 'input' },
-    { name: 'date', label: '日期', sorter: true, inSearch: true, valueType: 'input' },
-    { name: 'province', label: '省份' },
-    { name: 'city', label: '城市' },
-    { name: 'zip', label: '邮编' },
-    { name: 'operation', slot: true, fixed: 'right', width: 200,label: '操作'  },
-  ]
-  const list = ref(data)
-
-  const formSize = ref('default')
-  const ruleFormRef = ref<FormInstance>()
-  const ruleForm = reactive({
-    name: '',
-    sex: null,
-    price: null,
-  })
-
-  const rules = reactive({
-    name: [
-      { required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
-      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
-    ],
-    price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
-    sex: [
-      {
-        required: true,
-        message: '请选择性别',
-        trigger: 'change',
-      },
-    ],
-  })
-
-  const dialogVisible = ref(false)
-  const title = ref('新增')
-  const rowObj = ref({})
-  const selectObj = ref([])
-
-  const handleClose = async (done: () => void) => {
-    await ruleFormRef.value.validate((valid, fields) => {
-      if (valid) {
-        let obj = {
-          id: Date.now(),
-          ...ruleForm,
-          age: 0,
-          city: '普陀区',
-          address: '上海市普上海',
-          zip: 200333,
-          province: '上海',
-          admin: 'admin',
-          date: dayjs().format('YYYY-MM-DD'),
-        }
-        if (title.value === '新增') {
-          list.value = [obj, ...list.value]
-          ElMessage.success('添加成功')
-        } else {
-          list.value.forEach((item) => {
-            if (item.id === rowObj.value.id) {
-              item.name = obj.name
-              item.sex = obj.sex
-              item.price = obj.price
-            }
-          })
-        }
-        dialogVisible.value = false
-        console.log('submit!', obj)
-      } else {
-        console.log('error submit!', fields)
-      }
-    })
-  }
-
-  const add = () => {
-    title.value = '新增'
-    dialogVisible.value = true
-  }
-
-  const batchDelete = () => {
-    if (!selectObj.value.length) {
-      return ElMessage.error('未选中任何行')
-    }
-    ElMessageBox.confirm('你确定要删除选中项吗?', '温馨提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-      draggable: true,
-    })
-      .then(() => {
-        ElMessage.success('模拟删除成功')
-        list.value = list.value.concat([])
-      })
-      .catch(() => {})
-  }
-  const selectionChange = (val) => {
-    selectObj.value = val
-  }
-
-  const edit = (row) => {
-    title.value = '编辑'
-    rowObj.value = row
-    dialogVisible.value = true
-    ruleForm.name = row.name
-    ruleForm.sex = row.sex
-    ruleForm.price = row.price
-  }
-
-  const del = (row) => {
-    console.log('row==', row)
-    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-      draggable: true,
-    })
-      .then(() => {
-        list.value = list.value.filter((item) => item.id !== row.id)
-        ElMessage.success('删除成功')
-        loading.value = true
-        setTimeout(() => {
-          loading.value = false
-        }, 500)
-      })
-      .catch(() => {})
-  }
-
-  const reset = () => {
-    loading.value = true
-    setTimeout(() => {
-      loading.value = false
-    }, 500)
-    ElMessage.success('触发重置方法')
-  }
-
-  const onSubmit = (val) => {
-    console.log('val===', val)
-    ElMessage.success('触发查询方法')
-    loading.value = true
-    setTimeout(() => {
-      loading.value = false
-    }, 500)
-  }
-
-  onMounted(() => {
-    nextTick(()=>{
-      // let data = appContainer.value.
-    })
-    setTimeout(() => {
-      loading.value = false
-    }, 500)
-  })
-</script>
-
-<style scoped>
-  .edit-input {
-    padding-right: 100px;
-  }
-  .app-container{
-    flex: 1;
-    display: flex;
-    width: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-
-  }
-  .cancel-btn {
-    position: absolute;
-    right: 15px;
-    top: 10px;
-  }
-</style>
diff --git a/src/views/table/multi-table.vue b/src/views/table/multi-table.vue
deleted file mode 100644
index d575517..0000000
--- a/src/views/table/multi-table.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <u-container-layout>
-    <div class="app-container">
-      <el-table :data="list" style="width: 100%">
-        <el-table-column prop="date" label="Date" width="150" />
-        <el-table-column label="Delivery Info">
-          <el-table-column prop="name" label="Name" width="120" />
-          <el-table-column label="Address Info">
-            <el-table-column prop="state" label="State" width="120" />
-            <el-table-column prop="city" label="City" width="120" />
-            <el-table-column prop="address" label="Address" />
-            <el-table-column prop="zip" label="Zip" width="120" />
-          </el-table-column>
-        </el-table-column>
-      </el-table>
-    </div>
-  </u-container-layout>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const data = [
-    {
-      date: '2016-05-02',
-      name: '',
-      price: 0,
-      province: '上海',
-      admin: 'admin',
-      sex: '1',
-      checked: true,
-      id: '20',
-      img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-      age: 0,
-      city: '普陀区',
-      address: '上海市普上海市普上海市普上海市普',
-      zip: 200333,
-    },
-    {
-      date: '2016-05-01',
-      name: '王小虎2',
-      province: '上海',
-      sex: '0',
-      price: 0,
-      id: '2',
-      age: 12,
-      city: '普陀区',
-      img: 'https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg',
-      address: '上海市普',
-      zip: 200333,
-    },
-    {
-      date: '2022-03-25T09:27:42',
-      name: '王小虎3',
-      province: '上海',
-      sex: 1,
-      price: 33,
-      id: '3',
-      age: '15',
-      img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-      city: '普陀区',
-      address: '上海市普',
-      zip: 200333555,
-    },
-    {
-      date: '2016-04-02',
-      name: '王小虎4',
-      province: '上海',
-      sex: 1,
-      age: '11',
-      price: 33,
-      id: '4',
-      img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-      city: '普陀区',
-      address: '上海市普',
-      zip: 200333,
-    },
-    {
-      date: '2016-03-02',
-      name: '王小虎5',
-      province: '上海',
-      price: 0,
-      sex: 1,
-      age: '14',
-      img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-      id: '5',
-      city: '普陀区',
-      address: '上海市普',
-      zip: 200333,
-    },
-    {
-      date: '2014-05-02',
-      name: '王小虎6',
-      province: '上海',
-      price: 33,
-      sex: 1,
-      id: '6',
-      age: '12',
-      img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-      city: '普陀区',
-      address: '上海市普',
-      zip: 0,
-    },
-    {
-      date: '2019-05-02',
-      name: '王小虎7',
-      price: 33,
-      province: '上海',
-      sex: 1,
-      age: 0,
-      id: '7',
-      city: '普陀区',
-      img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-      address: '上海市普',
-      zip: 200333,
-    },
-    {
-      date: '2012-05-02',
-      name: '王小虎8',
-      province: '上海',
-      price: 0,
-      sex: 1,
-      age: '29',
-      id: '8',
-      city: '普陀区',
-      img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-      address: '上海市普',
-      zip: 200333,
-    },
-    {
-      date: '2011-05-02',
-      name: '王小虎91',
-      price: 33,
-      img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-      province: '上海',
-      sex: 1,
-      id: '9',
-      age: '30',
-      city: '普陀区',
-      address: '上海市普',
-      zip: 200333,
-    },
-    {
-      date: '2011-05-02',
-      name: '王小虎10',
-      province: '上海',
-      sex: 1,
-      id: '10',
-      age: '30',
-      img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
-      city: '普陀区',
-      address: '上海市普',
-      zip: 200333,
-    },
-    {
-      date: '2011-05-02',
-      name: '王小虎20',
-      province: '上海',
-      sex: 1,
-      price: 33,
-      id: '11',
-      age: '30',
-      city: '普陀区',
-      address: '上海市普',
-      zip: 200333,
-    },
-  ]
-
-  const list = ref(data)
-  const listLoading = ref(false)
-</script>
-<style scoped>
-  .edit-input {
-    padding-right: 100px;
-  }
-  .cancel-btn {
-    position: absolute;
-    right: 15px;
-    top: 10px;
-  }
-</style>
diff --git a/vite.config.ts b/vite.config.ts
index 4e90d17..42fe6c9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,14 +1,18 @@
 import { defineConfig,ConfigEnv, UserConfig,loadEnv  } from 'vite'
+import path from 'path'
 // vite.config.ts中无法使用import.meta.env 所以需要引入
 import vue from '@vitejs/plugin-vue'
+// 按需加载
 // import AutoImport from 'unplugin-auto-import/vite'
 // import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-import path from 'path'
+//import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 // 增加 vue文件 script name值
 import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+// 生产gz文件
 import viteCompression from 'vite-plugin-compression'
+
+
 function resolve (dir) {
   return path.join(__dirname, '.', dir)
 }