diff --git a/src/components/Table/PropTable/index.vue b/src/components/Table/PropTable/index.vue
new file mode 100644
index 0000000..c53e217
--- /dev/null
+++ b/src/components/Table/PropTable/index.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="zb-pro-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
+          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;
+}
+.zb-pro-table {
+  width: 100%;
+  height: 100%;
+  display:flex;
+  flex-direction:column;
+
+  .header{
+    display: flex;
+  }
+  .footer{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .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/components/u-Hamburger/index.vue b/src/components/u-Hamburger/index.vue
index 9a89e3a..562edfb 100644
--- a/src/components/u-Hamburger/index.vue
+++ b/src/components/u-Hamburger/index.vue
@@ -1,6 +1,6 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
-    <transition-group name="breadcrumb">
+    <transition-group name="breadcrumb" mode="out-in">
       <el-breadcrumb-item v-for="(item, index) in obj.levelList" :key="item.path">
         <span
           v-if="item.redirect === 'noRedirect' || index == obj.levelList.length - 1"
diff --git a/src/components/u-container-layout/index.vue b/src/components/u-container-layout/index.vue
index fc06dd1..7a463ad 100644
--- a/src/components/u-container-layout/index.vue
+++ b/src/components/u-container-layout/index.vue
@@ -10,17 +10,20 @@
 
 <style lang="scss" scoped>
   .m-container-layout {
-    padding: 20px;
-    box-sizing: border-box;
     width: 100%;
     height: 100%;
+    display: flex;
+    padding: 20px;
+    box-sizing: border-box;
     .m-container-layout-inner {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       background: white;
       padding: 20px;
       width: 100%;
       box-sizing: border-box;
-      min-height: 100%;
     }
   }
 </style>
diff --git a/src/layout/Main/index.vue b/src/layout/Main/index.vue
index 5521876..196e933 100644
--- a/src/layout/Main/index.vue
+++ b/src/layout/Main/index.vue
@@ -30,6 +30,7 @@
 <style lang="scss" scoped>
   .app-main {
     flex: 1;
+    display: flex;
     overflow-x: hidden;
     width: 100%;
     box-sizing: border-box;
diff --git a/src/router/index.ts b/src/router/index.ts
index 50f922a..7333c74 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,7 +8,6 @@ interface extendRoute {
 
 // 引入组件
 //
-import permissionRouter from './modules/permission'
 import tableRouter from './modules/table'
 import dataScreenRouter from './modules/dataScreen'
 import errorRouter from './modules/error'
@@ -117,7 +116,6 @@ export const asyncRoutes = [
     externalLink,
     clipboardTable,
     systemRouter,
-    permissionRouter,
     {
         path: '/:pathMatch(.*)',
         redirect: '/error/404'
diff --git a/src/router/modules/permission.ts b/src/router/modules/permission.ts
deleted file mode 100644
index f0eb210..0000000
--- a/src/router/modules/permission.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/** When your routing table is too long, you can split it into small modules**/
-
-import Layout from "@/layout/index.vue";
-
-const permissionRouter = {
-    path: '/permission',
-    component: Layout,
-    redirect: 'noRedirect',
-    name: 'permission',
-    alwaysShow: true, // 总是显示根目录
-    meta: {
-        title: '权限测试页',
-        icon: 'trend-charts', roles:['other']
-    },
-    children: [
-        {
-            path: 'page',
-            component: () => import('@/views/permission/page.vue'),
-            name: 'page',
-            meta: { title: '页面权限', icon: 'trend-charts',  roles:['other']  }
-        },
-    ]
-}
-
-export default permissionRouter
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index 855cdd8..6435eec 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -12,6 +12,12 @@ const systemRouter = {
         icon: 'ElementPlus'
     },
     children: [
+        {
+            path: 'page',
+            component: () => import('@/views/system/page.vue'),
+            name: 'page',
+            meta: { title: '页面权限', icon: 'trend-charts',  roles:['other']  }
+        },
         {
             path: 'user',
             component: () => import('@/views/system/user.vue'),
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index b9218ff..cef3cdd 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -35,6 +35,13 @@ export const useUserStore = defineStore({
                 resolve(this.roles)
             } )
         },
+        // 获取用户信息 ，如实际应用中 可以通过token通过请求接口在这里获取用户信息
+        getInfo(roles) {
+            return new Promise((resolve, reject) =>{
+                this.roles = roles
+                resolve(roles)
+            } )
+        },
         // 退出
         logout() {
             return new Promise((resolve, reject) => {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 528dcdb..223479d 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -57,3 +57,15 @@ body{
   box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
 }
 
+
+/* nprogress样式 */
+#nprogress .bar {
+  background: $primaryColor !important;
+}
+#nprogress .spinner-icon {
+  border-top-color: $primaryColor !important;
+  border-left-color: $primaryColor !important;
+}
+#nprogress .peg {
+  box-shadow: 0 0 10px $primaryColor, 0 0 5px $primaryColor !important;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 082c378..20b2e8c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,6 @@
-@import "./common.scss";
 @import './variables.scss';
 @import './sidebar.scss';
 @import './transition.scss';
+@import "./common.scss";
 
 
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 896f436..836eacf 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -40,15 +40,30 @@
 
 
 
-// 面包屑动画
-.breadcrumb-enter-active {
-  transition: all 0.25s;
+// 面包屑动画 方案1
+//.breadcrumb-enter-active {
+//  transition: all 0.25s;
+//}
+//.breadcrumb-enter-from,
+//.breadcrumb-leave-active {
+//  opacity: 0;
+//  transform: translateX(30px) skewX(-50deg);
+//}
+/* 面包屑动画 方案2 */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all 0.2s ease;
 }
 .breadcrumb-enter-from,
 .breadcrumb-leave-active {
   opacity: 0;
-  transform: translateX(30px) skewX(-50deg);
+  transform: translateX(10px);
 }
+.breadcrumb-leave-active {
+  position: absolute;
+  z-index: -1;
+}
+
 
 .fade-transform-leave-active,
 .fade-transform-enter-active {
diff --git a/src/views/other/qrcode.vue b/src/views/other/qrcode.vue
index b693c1d..13cf974 100644
--- a/src/views/other/qrcode.vue
+++ b/src/views/other/qrcode.vue
@@ -1,12 +1,14 @@
 <template>
   <u-container-layout>
-    <el-input v-model="inputData" placeholder="请输入" style="width: 400px; max-width: 100%" />
-    <el-button type="primary" @click="handleQrcode(1)">
-      <el-icon style="margin-right: 6px"><collection /></el-icon> 生成普通二维码
-    </el-button>
-    <el-button type="primary" @click="handleQrcode(2)">生成带logo</el-button>
-    <el-button type="primary" @click="handleQrcode(3)">生成随机颜色二维码</el-button>
-    <el-button type="primary" @click="handleQrcode(4)">下载</el-button>
+    <div style="display: flex">
+      <el-input v-model="inputData" placeholder="请输入" style="width: 400px; max-width: 100%" />
+      <el-button type="primary" @click="handleQrcode(1)">
+        <el-icon style="margin-right: 6px"><collection /></el-icon> 生成普通二维码
+      </el-button>
+      <el-button type="primary" @click="handleQrcode(2)">生成带logo</el-button>
+      <el-button type="primary" @click="handleQrcode(3)">生成随机颜色二维码</el-button>
+      <el-button type="primary" @click="handleQrcode(4)">下载</el-button>
+    </div>
     <div>
       <vue-qr :logoSrc="logoSrc" :text="inputData" :size="200" :callback="qrcodeCallback" :color-dark="randomColor" ></vue-qr>
     </div>
diff --git a/src/views/permission/page.vue b/src/views/system/page.vue
similarity index 88%
rename from src/views/permission/page.vue
rename to src/views/system/page.vue
index b533db6..390598a 100644
--- a/src/views/permission/page.vue
+++ b/src/views/system/page.vue
@@ -1,6 +1,6 @@
 <template>
   <u-container-layout class="m-permission-page">
-    <div style="margin-bottom: 20px"> 权限列表{{ store.getters.roles }} </div>
+    <div style="margin-bottom: 20px"> 权限列表{{ UserStore.roles }} </div>
     <el-radio-group v-model="switchRoles">
       <el-radio-button label="other" />
       <el-radio-button label="admin" />
diff --git a/src/views/table/components/comprehensive.vue b/src/views/table/components/comprehensive.vue
index 68a0978..eb1e688 100644
--- a/src/views/table/components/comprehensive.vue
+++ b/src/views/table/components/comprehensive.vue
@@ -1,83 +1,89 @@
 <template>
   <div class="inline-edit-table">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline" 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-item>
-        <el-button @click="reset(ruleFormRef)">重置</el-button>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
-        <el-button link @click="isExpand = !isExpand"
-          >{{ isExpand ? '合并' : '展开'
-          }}<el-icon>
-            <arrow-down v-if="!isExpand" />
-            <arrow-up v-else /> </el-icon
-        ></el-button>
-      </el-form-item>
-    </el-form>
-    <div style="margin-bottom: 15px">
-      <slot name="btn"></slot>
+    <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>
-    <el-table
-      v-loading="loading"
-      @selection-change="(val) => emit('selection-change', val)"
-      :data="list"
-      style="width: 100%"
-      :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"
+      <!----------底部---------------------->
+    <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"
         />
-        <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 style="width: 100%; display: flex; justify-content: center; padding-top: 20px">
-      <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>()
@@ -98,7 +104,8 @@
   })
 
   const currentPage1 = ref(1)
-  const isExpand = ref(true)
+  // 收缩展开
+  const isExpand = ref(false)
   const handleSizeChange = (val: number) => {
     console.log(`${val} items per page`)
   }
@@ -160,7 +167,7 @@
       .catch(() => {})
   }
 </script>
-<style scoped>
+<style scoped lang="scss">
   .edit-input {
     padding-right: 100px;
   }
@@ -171,5 +178,41 @@
   }
   .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/comprehensive.vue b/src/views/table/comprehensive.vue
index 03f0ee7..d8527c7 100644
--- a/src/views/table/comprehensive.vue
+++ b/src/views/table/comprehensive.vue
@@ -1,21 +1,21 @@
 <template>
   <u-container-layout>
-    <div class="app-container">
-      <comprehensive-table
-        :loading="loading"
-        @selection-change="selectionChange"
-        :columns="column"
-        :data="list"
-        @reset="reset"
-        @onSubmit="onSubmit"
+    <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-icon><plus /></el-icon> 添加</el-button
             >
             <el-button type="danger" @click="batchDelete"
-              ><el-icon><delete /></el-icon>删除</el-button
+            ><el-icon><delete /></el-icon>删除</el-button
             >
           </div>
         </template>
@@ -28,16 +28,16 @@
             删除
           </el-button>
         </template>
-      </comprehensive-table>
+      </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"
+            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" />
@@ -63,12 +63,13 @@
   </u-container-layout>
 </template>
 <script lang="ts" setup name="comprehensive">
-  import { ref, reactive, onMounted } from 'vue'
+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)
-  import ComprehensiveTable from './components/comprehensive.vue'
+  const appContainer = ref(null)
+  import PropTable from '@/components/Table/PropTable/index.vue'
   const data = []
   for (let i = 0; i < 100; i++) {
     data.push({
@@ -120,7 +121,7 @@
     { name: 'province', label: '省份' },
     { name: 'city', label: '城市' },
     { name: 'zip', label: '邮编' },
-    { name: 'operation', slot: true, fixed: 'right', width: 200 },
+    { name: 'operation', slot: true, fixed: 'right', width: 200,label: '操作'  },
   ]
   const list = ref(data)
 
@@ -257,6 +258,9 @@
   }
 
   onMounted(() => {
+    nextTick(()=>{
+      // let data = appContainer.value.
+    })
     setTimeout(() => {
       loading.value = false
     }, 500)
@@ -267,6 +271,14 @@
   .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;