diff --git a/package.json b/package.json
index 8de5506..55b89d1 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "dev": "npm run serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build"
   },
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index eeb5a4b..4c0a847 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,18 +1,27 @@
 <template>
   <section class="app-main" >
-      <router-view v-slot="{ Component,route }">
-        <transition name="fade-slide" mode="out-in">
-          <component :is="Component" :key="route.path"/>
-        </transition>
-      </router-view>
+        <router-view v-slot="{ Component,route }">
+          <transition name="fade-slide" mode="out-in">
+            <keep-alive :include="cachedViews">
+
+              <component :is="Component" :key="route.name" />
+
+            </keep-alive>
+          </transition>
+        </router-view>
       <u-setting/>
   </section>
 </template>
 
 <script lang="ts" setup>
     import USetting from '@/components/u-setting/index.vue'
+    import {useStore} from "vuex";
+    import {computed, ref,} from 'vue'
+    const store = useStore()
 
-
+    const cachedViews = computed(()=>{
+      return store.state.tagsView.cachedViews
+    })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index f5a2362..ec69775 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -75,13 +75,11 @@ onMounted(()=>{
   position: relative;
   overflow: hidden;
   width: 100%;
-  ::v-deep {
-    .el-scrollbar__bar {
-      bottom: 0px;
-    }
-    .el-scrollbar__wrap {
-      height: 35px;
-    }
+  ::v-deep(.el-scrollbar__bar){
+    bottom: 0px;
+  }
+  ::v-deep(.el-scrollbar__wrap){
+    height: 35px;
   }
 }
 </style>
diff --git a/src/permission.js b/src/permission.ts
similarity index 93%
rename from src/permission.js
rename to src/permission.ts
index a791914..e3ecf4d 100644
--- a/src/permission.js
+++ b/src/permission.ts
@@ -14,8 +14,10 @@ router.beforeEach(async(to, from, next) => {
   // 开启进度条
   NProgress.start()
 
-  // set page title
-  document.title = to.meta.title
+  // 设置标题
+  if(typeof(to.meta.title) === 'string'){
+      document.title = to.meta.title ||'vue-admin-perfect'
+  }
 
   // 确定用户是否已登录
   const hasToken = getToken()
diff --git a/src/router/index.ts b/src/router/index.ts
index b38ed8c..b9dab33 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -20,7 +20,7 @@ interface extendRoute {
 /**
  * alwaysShow 如果设置为true，将始终显示根菜单，无论其子路由长度如何
  * hidden 如果“hidden:true”不会显示在侧边栏中（默认值为false）
- *
+ * keepAlive 设为true 缓存
  */
 
 
@@ -65,7 +65,7 @@ const clipboardTable = {
             path: 'index',
             component: () => import('@/views/clipboard/index.vue'),
             name: 'map',
-            meta: { title: '剪贴板', noCache: true , roles:['other'] ,icon: 'document-copy',}
+            meta: { title: '剪贴板',  roles:['other'] ,icon: 'document-copy',}
         },
 
     ]
@@ -88,7 +88,7 @@ const zipRoutes = {
             path: 'download',
             component: () => import('@/views/zip/download.vue'),
             name: 'download',
-            meta: { title: 'Zip', noCache: true , roles:['other'] ,icon: 'document-copy',}
+            meta: { title: 'Zip', roles:['other'] ,icon: 'document-copy',}
         },
 
     ]
diff --git a/src/router/modules/charts.ts b/src/router/modules/charts.ts
index 310a7b2..a4db034 100644
--- a/src/router/modules/charts.ts
+++ b/src/router/modules/charts.ts
@@ -23,19 +23,19 @@ const chartsRouter = {
             path: 'migration',
             component: () => import('@/views/charts/migration.vue'),
             name: 'migration',
-            meta: { title: '迁徙图', noCache: true , roles:['other'] }
+            meta: { title: '迁徙图',  roles:['other'] }
         },
         {
             path: 'simple',
             component: () => import('@/views/charts/simple.vue'),
             name: 'charts-simple',
-            meta: { title: '简单图表', noCache: true , roles:['other'] }
+            meta: { title: '简单图表', roles:['other'] }
         },
         {
             path: 'complex',
             component: () => import('@/views/charts/complex.vue'),
             name: 'charts-complex',
-            meta: { title: '复杂图表', noCache: true , roles:['other'] }
+            meta: { title: '复杂图表', roles:['other'] }
         },
     ]
 }
diff --git a/src/router/modules/chat.ts b/src/router/modules/chat.ts
index a0bd5b0..0c717c0 100644
--- a/src/router/modules/chat.ts
+++ b/src/router/modules/chat.ts
@@ -16,7 +16,7 @@ const chartsRouter = {
             path: 'index',
             component: () => import('@/views/chat/index.vue'),
             name: 'chat',
-            meta: { title: '聊天框', noCache: true,icon: 'chat-square'  }
+            meta: { title: '聊天框', icon: 'chat-square'  }
         },
     ]
 }
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 90fcfaa..e080b42 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -17,67 +17,67 @@ const componentsRouter = {
             path: 'button',
             component: () => import('@/views/components-demo/button.vue'),
             name: 'button',
-            meta: { title: '按钮', noCache: true  }
+            meta: { title: '按钮',   }
         },
         {
             path: 'upload',
             component: () => import('@/views/components-demo/upload.vue'),
             name: 'upload',
-            meta: { title: '上传图片', noCache: true  }
+            meta: { title: '上传图片',  }
         },
         {
             path: 'form',
             component: () => import('@/views/components-demo/form.vue'),
             name: 'form',
-            meta: { title: '表单', noCache: true  , roles:['other']}
+            meta: { title: '表单',  roles:['other']}
         },
         {
             path: 'link',
             component: () => import('@/views/components-demo/link.vue'),
             name: 'link',
-            meta: { title: '文字链接', noCache: true  , roles:['other']}
+            meta: { title: '文字链接',   roles:['other']}
         },
         {
             path: 'radio',
             component: () => import('@/views/components-demo/radio.vue'),
             name: 'radio',
-            meta: { title: '单选框', noCache: true  , roles:['other']}
+            meta: { title: '单选框',  roles:['other']}
         },
         {
             path: 'checkbox',
             component: () => import('@/views/components-demo/checkbox.vue'),
             name: 'checkbox',
-            meta: { title: '多选框', noCache: true  , roles:['other']}
+            meta: { title: '多选框',  roles:['other']}
         },
         {
             path: 'input',
             component: () => import('@/views/components-demo/input.vue'),
             name: 'input',
-            meta: { title: '输入框', noCache: true  , roles:['other']}
+            meta: { title: '输入框',  roles:['other']}
         },
         {
             path: 'inputnumber',
             component: () => import('@/views/components-demo/inputnumber.vue'),
             name: 'inputnumber',
-            meta: { title: '数字输入框', noCache: true  , roles:['other']}
+            meta: { title: '数字输入框',  roles:['other']}
         },
         {
             path: 'timepicker',
             component: () => import('@/views/components-demo/timepicker.vue'),
             name: 'timepicker',
-            meta: { title: '时间选择器', noCache: true  , roles:['other']}
+            meta: { title: '时间选择器',  roles:['other']}
         },
         {
             path: 'datetimepicker',
             component: () => import('@/views/components-demo/datetimepicker.vue'),
             name: 'datetimepicker',
-            meta: { title: '日期时间选择器', noCache: true  , roles:['other']}
+            meta: { title: '日期时间选择器',  roles:['other']}
         },
         {
             path: 'scroll',
             component: () => import('@/views/components-demo/scroll.vue'),
             name: 'scroll',
-            meta: { title: '无限滚动', noCache: true  }
+            meta: { title: '无限滚动',  }
         },
 
 
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
index 9d57c59..511391a 100644
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -18,13 +18,13 @@ const errorRouter = {
             path: '404',
             component: () => import('@/views/error/404.vue'),
             name: '404',
-            meta: { title: '404', noCache: true }
+            meta: { title: '404', }
         },
         {
             path: '401',
             component: () => import('@/views/error/401.vue'),
             name: '401',
-            meta: { title: '401', noCache: true }
+            meta: { title: '401', }
         },
     ]
 }
diff --git a/src/router/modules/excel.ts b/src/router/modules/excel.ts
index 176400d..b2fe387 100644
--- a/src/router/modules/excel.ts
+++ b/src/router/modules/excel.ts
@@ -18,25 +18,25 @@ const excelRouter = {
             path: 'export-excel',
             component: () => import('@/views/excel/export-excel.vue'),
             name: 'export-excel',
-            meta: { title: '导出 Excel', noCache: true }
+            meta: { title: '导出 Excel',  }
         },
         {
             path: 'export-merge-header',
             component: () => import('@/views/excel/export-merge-header.vue'),
             name: 'export-merge-header',
-            meta: { title: '导出 多级表头', noCache: true }
+            meta: { title: '导出 多级表头',  }
         },
         {
             path: 'upload-excel',
             component: () => import('@/views/excel/upload-excel.vue'),
             name: 'upload-excel',
-            meta: { title: '上传 Excel', noCache: true }
+            meta: { title: '上传 Excel',  }
         },
         {
             path: 'upload-style-excel',
             component: () => import('@/views/excel/export-style-excel.vue'),
             name: 'upload-style-excel',
-            meta: { title: '自定义样式导出 Excel', noCache: true }
+            meta: { title: '自定义样式导出 Excel',  }
         },
     ]
 }
diff --git a/src/router/modules/externalLink.ts b/src/router/modules/externalLink.ts
index c015ec7..379b014 100644
--- a/src/router/modules/externalLink.ts
+++ b/src/router/modules/externalLink.ts
@@ -11,7 +11,7 @@ const externalLink = {
         {
             path: 'https://github.com/zouzhibin/vue-admin-perfect',
             name: 'external',
-            meta: { title: 'Github地址', noCache: true , icon: 'link' }
+            meta: { title: 'Github地址',  icon: 'link' }
         },
     ]
 }
diff --git a/src/router/modules/other.ts b/src/router/modules/other.ts
index 1367974..38b5339 100644
--- a/src/router/modules/other.ts
+++ b/src/router/modules/other.ts
@@ -16,55 +16,55 @@ const othersRouter = {
             path: 'editor',
             component: () => import('@/views/other/editor.vue'),
             name: 'editor',
-            meta: { title: '富文本编辑器', noCache: true, roles:['other'] }
+            meta: { title: '富文本编辑器',  roles:['other'] }
         },
         {
             path: 'mark-down',
             component: () => import('@/views/other/mark-down.vue'),
             name: 'mark-down',
-            meta: { title: 'markDown', noCache: true , roles:['other']}
+            meta: { title: 'markDown',  roles:['other']}
         },
         {
             path: 'print',
             component: () => import('@/views/other/print.vue'),
             name: 'print',
-            meta: { title: '打印', noCache: true  }
+            meta: { title: '打印',  }
         },
         {
             path: 'cropper',
             component: () => import('@/views/other/cropper/index.vue'),
             name: 'cropper',
-            meta: { title: '头像裁剪', noCache: true  }
+            meta: { title: '头像裁剪'  }
         },
         {
             path: 'grid-sorter',
             component: () => import('@/views/other/grid-sorter.vue'),
             name: 'grid-sorter',
-            meta: { title: '卡片拖拽', noCache: true  }
+            meta: { title: '卡片拖拽',  }
         },
         {
             path: 'splitpane',
             component: () => import('@/views/other/splitpane.vue'),
             name: 'splitpane',
-            meta: { title: '分割模块', noCache: true  }
+            meta: { title: '分割模块',  }
         },
         {
             path: 'qrcode',
             component: () => import('@/views/other/qrcode.vue'),
             name: 'qrcode',
-            meta: { title: '生成二维码', noCache: true  }
+            meta: { title: '生成二维码',   }
         },
         {
             path: 'right-menu',
             component: () => import('@/views/other/right-menu.vue'),
             name: 'right-menu',
-            meta: { title: '右键菜单', noCache: true  }
+            meta: { title: '右键菜单',  }
         },
         {
             path: 'count',
             component: () => import('@/views/other/count.vue'),
             name: 'count',
-            meta: { title: '数字自增长', noCache: true  }
+            meta: { title: '数字自增长',   }
         },
     ]
 }
diff --git a/src/router/modules/permission.ts b/src/router/modules/permission.ts
index 70de4ed..75576f1 100644
--- a/src/router/modules/permission.ts
+++ b/src/router/modules/permission.ts
@@ -17,7 +17,7 @@ const permissionRouter = {
             path: 'page',
             component: () => import('@/views/permission/page.vue'),
             name: 'page',
-            meta: { title: '页面权限', noCache: true,icon: 'trend-charts', roles:['other']  }
+            meta: { title: '页面权限', icon: 'trend-charts', roles:['other']  }
         },
     ]
 }
diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts
index 0c4aada..c4eb34e 100644
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@@ -17,19 +17,19 @@ const tableRouter = {
             path: 'comprehensive',
             component: () => import('@/views/table/comprehensive.vue'),
             name: 'comprehensive',
-            meta: { title: '综合表格', noCache: true }
+            meta: { title: '综合表格', keepAlive: true }
         },
         {
             path: 'inline-table',
             component: () => import('@/views/table/inline-edit-table.vue'),
             name: 'inline-table',
-            meta: { title: '行内编辑', noCache: true  }
+            meta: { title: '行内编辑', keepAlive: true  }
         },
         {
             path: 'edit-table',
             component: () => import('@/views/table/edit.vue'),
             name: 'edit-table',
-            meta: { title: '可编辑表格', noCache: true  }
+            meta: { title: '可编辑表格', keepAlive: true  }
         },
         // {
         //     path: 'multi-table',
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index 9ae4021..ccc1464 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -13,6 +13,11 @@ const mutations = {
                 title: view.meta.title || 'no-name'
             })
         )
+        if (view.meta.keepAlive) {
+
+            state.cachedViews.push(view.name)
+            console.log('======触发=======',state.cachedViews)
+        }
     },
     REMOVE_VISITED_VIEW: (state, routes) => {
         state.visitedViews = state.visitedViews.filter(item=>!routes.includes(item.path))
@@ -34,12 +39,25 @@ const mutations = {
                 break
             }
         }
+        for (const i of state.cachedViews) {
+            if (i === view.name) {
+                const index = state.cachedViews.indexOf(i)
+                state.cachedViews.splice(index, 1)
+                break
+            }
+        }
+
     },
     DEL_CACHED_VIEW: (state, view) => {
         const index = state.cachedViews.indexOf(view.name)
         index > -1 && state.cachedViews.splice(index, 1)
     },
 
+    DEL_ALL_VIEWS: (state) => {
+        state.visitedViews = []
+        state.cachedViews = []
+    }
+
 }
 
 const actions = {
@@ -81,6 +99,12 @@ const actions = {
     },
     clearVisitedView({ commit, state }){
         commit('CLEAR_VISITED_VIEW')
+    },
+    delAllViews({ commit, state }) {
+        return new Promise((resolve) => {
+            commit('DEL_ALL_VIEWS')
+            resolve([...state.visitedViews])
+        })
     }
 }
 
diff --git a/src/views/charts/components/migration/index.vue b/src/views/charts/components/migration/index.vue
index 554d5ef..9df1da3 100644
--- a/src/views/charts/components/migration/index.vue
+++ b/src/views/charts/components/migration/index.vue
@@ -119,7 +119,7 @@ var convertToLineData = function(data, gps) {
   for (var i = 0; i < data.length; i++) {
     var dataItem = data[i];
     var toCoord = geoCoordMap[dataItem.name];
-    debugger;
+    // debugger;
     var fromCoord = gps; //郑州
     //  var toCoord = geoGps[Math.random()*3];
     if (fromCoord && toCoord) {
diff --git a/src/views/chat/components/u-chartBox/index.vue b/src/views/chat/components/u-chartBox/index.vue
index 659b711..55db3ad 100644
--- a/src/views/chat/components/u-chartBox/index.vue
+++ b/src/views/chat/components/u-chartBox/index.vue
@@ -251,11 +251,9 @@
   min-height: 120px;
   flex: 1;
   background: #f7f6f4;
-  ::v-deep{
-    .at-logo{
-      padding-right: 5px;
-      vertical-align: text-bottom;
-    }
+  ::v-deep(.at-logo){
+    padding-right: 5px;
+    vertical-align: text-bottom;
   }
 
 }
@@ -266,7 +264,7 @@
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
-  ::v-deep .el-button{
+  ::v-deep(.el-button){
     padding: 8px 20px;
     margin-right: 15px;
   }
diff --git a/src/views/components-demo/upload.vue b/src/views/components-demo/upload.vue
index c812e11..86dea12 100644
--- a/src/views/components-demo/upload.vue
+++ b/src/views/components-demo/upload.vue
@@ -134,7 +134,6 @@
     padding: 0;
     width: 146px;
     height: 146px;
-
     display: inline-flex;
 }
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 05b32b9..b7d5192 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -168,10 +168,8 @@
     }
   }
   .custom{
-    ::v-deep{
-      .el-card__body{
+    ::v-deep(.el-card__body){
         padding: 0;
-      }
     }
   }
   .item {
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 0a638b9..bf4abb6 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -115,17 +115,15 @@
 
 <style lang="scss" scoped>
 $dark_gray:#889aa4;
-  ::v-deep{
-    input {
-      background: transparent;
-      border: 0;
-      -webkit-appearance: none;
-      border-radius: 0;
-      padding: 12px 5px 12px 15px;
-      color: #fff;
-      height: 47px;
-      caret-color: #fff;
-    }
+  ::v-deep(input){
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    border-radius: 0;
+    padding: 12px 5px 12px 15px;
+    color: #fff;
+    height: 47px;
+    caret-color: #fff;
   }
   .login-box{
     width: 80%;
diff --git a/src/views/other/cropper/cropper1.vue b/src/views/other/cropper/cropper1.vue
index fe2d32c..28c5d7e 100644
--- a/src/views/other/cropper/cropper1.vue
+++ b/src/views/other/cropper/cropper1.vue
@@ -164,10 +164,8 @@
     text-align: center;
 
   }
-  ::v-deep{
-    .el-button{
-      margin-top: 15px;
-    }
+  ::v-deep(.el-button){
+    margin-top: 15px;
   }
   .m-cropper{
     display: flex;
diff --git a/src/views/other/cropper/cropper2.vue b/src/views/other/cropper/cropper2.vue
index e9b9dff..885dd48 100644
--- a/src/views/other/cropper/cropper2.vue
+++ b/src/views/other/cropper/cropper2.vue
@@ -199,10 +199,8 @@
     text-align: center;
 
   }
-  ::v-deep{
-    .el-button{
-      margin-top: 15px;
-    }
+  ::v-deep(.el-button){
+    margin-top: 15px;
   }
   .m-cropper{
     width: 100%;
diff --git a/src/views/other/cropper/index.vue b/src/views/other/cropper/index.vue
index ca800d9..c1360e7 100644
--- a/src/views/other/cropper/index.vue
+++ b/src/views/other/cropper/index.vue
@@ -182,10 +182,8 @@
   text-align: center;
 
 }
-::v-deep{
-  .el-button{
-    margin-top: 15px;
-  }
+::v-deep(.el-button){
+  margin-top: 15px;
 }
 .m-cropper{
   width: 100%;
diff --git a/src/views/other/splitpane.vue b/src/views/other/splitpane.vue
index 2194fce..14e0bb5 100644
--- a/src/views/other/splitpane.vue
+++ b/src/views/other/splitpane.vue
@@ -48,15 +48,12 @@
 .item5{
   background: rgb(72, 239, 205);
 }
-
-::v-deep {
-  .splitpanes__splitter{
-    min-height: 6px;
-    cursor: row-resize;
-    background: white;
-  }
-  .splitpanes__splitter {
-    min-width: 6px;
-  }
+::v-deep(.splitpanes__splitter){
+  min-width: 6px;
+}
+::v-deep(.splitpanes__splitter) {
+  min-height: 6px;
+  cursor: row-resize;
+  background: white;
 }
 </style>
diff --git a/src/views/table/components/edit.vue b/src/views/table/components/edit.vue
index d798f6f..92911fc 100644
--- a/src/views/table/components/edit.vue
+++ b/src/views/table/components/edit.vue
@@ -219,14 +219,6 @@
     }
   }
 
-  const formInline = reactive({
-    user: '',
-    region: '',
-  })
-
-  const onSubmit = () => {
-    console.log('submit!')
-  }
 
   const deleteAction = (row)=>{
     row.visible = false
diff --git a/src/views/table/comprehensive.vue b/src/views/table/comprehensive.vue
index a2cb823..e8f89e8 100644
--- a/src/views/table/comprehensive.vue
+++ b/src/views/table/comprehensive.vue
@@ -291,6 +291,9 @@ import {ref, reactive, onMounted} from "vue";
     },500)
   })
 </script>
+<script lang="ts">
+  export default { name: 'comprehensive' };
+</script>
 <style scoped>
 .edit-input {
   padding-right: 100px;
diff --git a/src/views/table/edit.vue b/src/views/table/edit.vue
index d206da8..2ceed97 100644
--- a/src/views/table/edit.vue
+++ b/src/views/table/edit.vue
@@ -167,9 +167,7 @@
 </script>
 
 <style lang="scss" scoped>
-::v-deep{
-  .el-divider--horizontal{
-    margin: 10px 0;
-  }
+::v-deep(.el-divider--horizontal){
+  margin: 10px 0;
 }
 </style>
diff --git a/src/views/table/inline-edit-table.vue b/src/views/table/inline-edit-table.vue
index fb460b9..702b77b 100644
--- a/src/views/table/inline-edit-table.vue
+++ b/src/views/table/inline-edit-table.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="inline-edit-table">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+    <el-form :inline="true" :model="formInline1" class="demo-form-inline">
       <el-form-item label="姓名">
-        <el-input v-model="formInline.user" placeholder="请输入姓名" />
+        <el-input v-model="formInline1.username" placeholder="请输入姓名" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">搜索</el-button>
@@ -86,93 +86,96 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup>
-import {computed, ref} from "vue";
-import { ElMessage,ElMessageBox  } from 'element-plus'
-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,
-    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
+
+<script lang="ts" setup >
+  import {computed, ref} from "vue";
+  import { ElMessage,ElMessageBox  } from 'element-plus'
+  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,
+      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
+    })
+  }
+
+  const currentPage1 = ref(1)
+  const handleSizeChange = (val: number) => {
+    console.log(`${val} items per page`)
+  }
+  const handleCurrentChange = (val: number) => {
+    console.log(`current page: ${val}`)
+    currentPage1.value = val
+  }
+
+  const transData = ref(data)
+  const loading = ref(false)
+
+  const list = computed(()=>{
+    let arr = JSON.parse(JSON.stringify(transData.value))
+    return arr.splice((currentPage1.value-1)*10,10)
   })
-}
-
-const currentPage1 = ref(1)
-const handleSizeChange = (val: number) => {
-  console.log(`${val} items per page`)
-}
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-  currentPage1.value = val
-}
-
-const transData = ref(data)
-const loading = ref(false)
-
-const list = computed(()=>{
-  let arr = JSON.parse(JSON.stringify(transData.value))
-  return arr.splice((currentPage1.value-1)*10,10)
-})
 
 
-const listLoading = ref(false)
+  const listLoading = ref(false)
 
-const confirmEdit = (row)=>{
-  row.edit = false
-}
+  const confirmEdit = (row)=>{
+    row.edit = false
+  }
 
-const cancelEdit = (row)=>{
-  row.edit = false
-}
+  const cancelEdit = (row)=>{
+    row.edit = false
+  }
 
-import { reactive } from 'vue'
+  import { reactive } from 'vue'
 
-const formInline = reactive({
-  user: '',
-  region: '',
-})
+  const formInline1 = reactive({
+    username: '',
+  })
 
-const onSubmit = () => {
-  console.log('submit!')
-  loading.value = true
-  setTimeout(()=>{
-    loading.value = false
-  },500)
-}
+  const onSubmit = () => {
+    console.log('submit!')
+    loading.value = true
+    setTimeout(()=>{
+      loading.value = false
+    },500)
+  }
 
-const deleteAction = (row)=>{
-  ElMessageBox.confirm(
-      '你确定要删除当前项吗?',
-      '温馨提示',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        draggable: true,
-      }
-  )
-      .then(() => {
-        transData.value = transData.value.filter(item=>item.id!==row.id)
-        ElMessage.success('删除成功')
-      })
-      .catch(() => {
+  const deleteAction = (row)=>{
+    ElMessageBox.confirm(
+        '你确定要删除当前项吗?',
+        '温馨提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          draggable: true,
+        }
+    )
+        .then(() => {
+          transData.value = transData.value.filter(item=>item.id!==row.id)
+          ElMessage.success('删除成功')
+        })
+        .catch(() => {
 
-      })
+        })
 
-}
+  }
 
+</script>
+<script lang="ts">
+export default { name: 'inline-table' };
 </script>
 <style scoped>
 .edit-input {