diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
new file mode 100644
index 0000000..9076d50
--- /dev/null
+++ b/src/router/modules/example.js
@@ -0,0 +1,21 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const exampleRouters = [{
+  path: 'example',
+  component: Layout,
+  redirect: '/exampleTable',
+  name: 'Example',
+  alwaysShow: true,
+  meta: {
+    title: '示例',
+    icon: 'icon-config' // 图标
+  },
+  children: [
+    {
+      path: '/exampleTable',
+      name: 'ExampleTable',
+      component: () => import('@/views/example/tableExample'),
+      meta: { title: '表格示例', icon: '' }
+    }
+  ]
+}]

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
new file mode 100644
index 0000000..9076d50
--- /dev/null
+++ b/src/router/modules/example.js
@@ -0,0 +1,21 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const exampleRouters = [{
+  path: 'example',
+  component: Layout,
+  redirect: '/exampleTable',
+  name: 'Example',
+  alwaysShow: true,
+  meta: {
+    title: '示例',
+    icon: 'icon-config' // 图标
+  },
+  children: [
+    {
+      path: '/exampleTable',
+      name: 'ExampleTable',
+      component: () => import('@/views/example/tableExample'),
+      meta: { title: '表格示例', icon: '' }
+    }
+  ]
+}]
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
new file mode 100644
index 0000000..d9dac99
--- /dev/null
+++ b/src/views/example/tableExample.vue
@@ -0,0 +1,140 @@
+<template>
+  <app-container>
+    <normal-table :data="list" :head="head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn">添加</el-button>
+        <el-button size="small" class="edit_btn">修改</el-button>
+        <el-button size="small" class="edit_btn">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="registerIris(scope.row)">采集</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+export default {
+  name: 'TableExample',
+  components: { AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        name: '', // 姓名
+        sex: '', // 性别
+        nation: '', // 民族
+        collReason: '', // 采集原因
+        cardType: '', // 证件类型
+        idCardNo: '', // 证件号码
+        personTag: '', // 人员标签
+        startTime: '', // 创建开始时间
+        endTime: '', // 创建结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '姓名',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '性别',
+          value: 'sexName',
+          align: 'center',
+          width: 60
+        },
+        {
+          text: '民族',
+          value: 'nationName',
+          width: 50,
+          align: 'center'
+        },
+        {
+          text: '采集原因',
+          value: 'collReasonName',
+          align: 'center'
+        },
+        {
+          text: '证件类型',
+          value: 'cardTypeName',
+          align: 'center',
+          width: 80
+        },
+        {
+          text: '证件号码',
+          value: 'idCardNo',
+          align: 'center'
+        },
+        {
+          text: '户籍地址',
+          value: 'residenceAddr',
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 120,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      head: {
+        show: true,
+        text: '数据列表'
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      const that = this
+      setTimeout(function() {
+        that.list = [
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' }
+        ]
+        that.total = 200
+        that.listLoading = false
+      }, 2000)
+    },
+    changePage(val) {
+      if (val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
new file mode 100644
index 0000000..9076d50
--- /dev/null
+++ b/src/router/modules/example.js
@@ -0,0 +1,21 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const exampleRouters = [{
+  path: 'example',
+  component: Layout,
+  redirect: '/exampleTable',
+  name: 'Example',
+  alwaysShow: true,
+  meta: {
+    title: '示例',
+    icon: 'icon-config' // 图标
+  },
+  children: [
+    {
+      path: '/exampleTable',
+      name: 'ExampleTable',
+      component: () => import('@/views/example/tableExample'),
+      meta: { title: '表格示例', icon: '' }
+    }
+  ]
+}]
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
new file mode 100644
index 0000000..d9dac99
--- /dev/null
+++ b/src/views/example/tableExample.vue
@@ -0,0 +1,140 @@
+<template>
+  <app-container>
+    <normal-table :data="list" :head="head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn">添加</el-button>
+        <el-button size="small" class="edit_btn">修改</el-button>
+        <el-button size="small" class="edit_btn">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="registerIris(scope.row)">采集</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+export default {
+  name: 'TableExample',
+  components: { AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        name: '', // 姓名
+        sex: '', // 性别
+        nation: '', // 民族
+        collReason: '', // 采集原因
+        cardType: '', // 证件类型
+        idCardNo: '', // 证件号码
+        personTag: '', // 人员标签
+        startTime: '', // 创建开始时间
+        endTime: '', // 创建结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '姓名',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '性别',
+          value: 'sexName',
+          align: 'center',
+          width: 60
+        },
+        {
+          text: '民族',
+          value: 'nationName',
+          width: 50,
+          align: 'center'
+        },
+        {
+          text: '采集原因',
+          value: 'collReasonName',
+          align: 'center'
+        },
+        {
+          text: '证件类型',
+          value: 'cardTypeName',
+          align: 'center',
+          width: 80
+        },
+        {
+          text: '证件号码',
+          value: 'idCardNo',
+          align: 'center'
+        },
+        {
+          text: '户籍地址',
+          value: 'residenceAddr',
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 120,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      head: {
+        show: true,
+        text: '数据列表'
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      const that = this
+      setTimeout(function() {
+        that.list = [
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' }
+        ]
+        that.total = 200
+        that.listLoading = false
+      }, 2000)
+    },
+    changePage(val) {
+      if (val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 00466c2..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -24,7 +24,7 @@
   name: 'AreaSelectTree',
   data() {
     return {
-      dialogFormVisible: true,
+      dialogFormVisible: false,
       defaultProps: {
         label: 'name',
         children: 'children',
@@ -36,12 +36,6 @@
     }
   },
   methods: {
-    // 获取数据
-    // fetchData() {
-    //   return new Promise(function(resolve, reject) {
-    //     getAreaTree(this.roleId)
-    //   })
-    // },
     // 初始化对话框
     initDialog() {
       this.dialogFormVisible = true
@@ -76,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
new file mode 100644
index 0000000..9076d50
--- /dev/null
+++ b/src/router/modules/example.js
@@ -0,0 +1,21 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const exampleRouters = [{
+  path: 'example',
+  component: Layout,
+  redirect: '/exampleTable',
+  name: 'Example',
+  alwaysShow: true,
+  meta: {
+    title: '示例',
+    icon: 'icon-config' // 图标
+  },
+  children: [
+    {
+      path: '/exampleTable',
+      name: 'ExampleTable',
+      component: () => import('@/views/example/tableExample'),
+      meta: { title: '表格示例', icon: '' }
+    }
+  ]
+}]
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
new file mode 100644
index 0000000..d9dac99
--- /dev/null
+++ b/src/views/example/tableExample.vue
@@ -0,0 +1,140 @@
+<template>
+  <app-container>
+    <normal-table :data="list" :head="head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn">添加</el-button>
+        <el-button size="small" class="edit_btn">修改</el-button>
+        <el-button size="small" class="edit_btn">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="registerIris(scope.row)">采集</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+export default {
+  name: 'TableExample',
+  components: { AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        name: '', // 姓名
+        sex: '', // 性别
+        nation: '', // 民族
+        collReason: '', // 采集原因
+        cardType: '', // 证件类型
+        idCardNo: '', // 证件号码
+        personTag: '', // 人员标签
+        startTime: '', // 创建开始时间
+        endTime: '', // 创建结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '姓名',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '性别',
+          value: 'sexName',
+          align: 'center',
+          width: 60
+        },
+        {
+          text: '民族',
+          value: 'nationName',
+          width: 50,
+          align: 'center'
+        },
+        {
+          text: '采集原因',
+          value: 'collReasonName',
+          align: 'center'
+        },
+        {
+          text: '证件类型',
+          value: 'cardTypeName',
+          align: 'center',
+          width: 80
+        },
+        {
+          text: '证件号码',
+          value: 'idCardNo',
+          align: 'center'
+        },
+        {
+          text: '户籍地址',
+          value: 'residenceAddr',
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 120,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      head: {
+        show: true,
+        text: '数据列表'
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      const that = this
+      setTimeout(function() {
+        that.list = [
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' }
+        ]
+        that.total = 200
+        that.listLoading = false
+      }, 2000)
+    },
+    changePage(val) {
+      if (val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 00466c2..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -24,7 +24,7 @@
   name: 'AreaSelectTree',
   data() {
     return {
-      dialogFormVisible: true,
+      dialogFormVisible: false,
       defaultProps: {
         label: 'name',
         children: 'children',
@@ -36,12 +36,6 @@
     }
   },
   methods: {
-    // 获取数据
-    // fetchData() {
-    //   return new Promise(function(resolve, reject) {
-    //     getAreaTree(this.roleId)
-    //   })
-    // },
     // 初始化对话框
     initDialog() {
       this.dialogFormVisible = true
@@ -76,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index ff96295..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -150,11 +150,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
new file mode 100644
index 0000000..9076d50
--- /dev/null
+++ b/src/router/modules/example.js
@@ -0,0 +1,21 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const exampleRouters = [{
+  path: 'example',
+  component: Layout,
+  redirect: '/exampleTable',
+  name: 'Example',
+  alwaysShow: true,
+  meta: {
+    title: '示例',
+    icon: 'icon-config' // 图标
+  },
+  children: [
+    {
+      path: '/exampleTable',
+      name: 'ExampleTable',
+      component: () => import('@/views/example/tableExample'),
+      meta: { title: '表格示例', icon: '' }
+    }
+  ]
+}]
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
new file mode 100644
index 0000000..d9dac99
--- /dev/null
+++ b/src/views/example/tableExample.vue
@@ -0,0 +1,140 @@
+<template>
+  <app-container>
+    <normal-table :data="list" :head="head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn">添加</el-button>
+        <el-button size="small" class="edit_btn">修改</el-button>
+        <el-button size="small" class="edit_btn">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="registerIris(scope.row)">采集</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+export default {
+  name: 'TableExample',
+  components: { AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        name: '', // 姓名
+        sex: '', // 性别
+        nation: '', // 民族
+        collReason: '', // 采集原因
+        cardType: '', // 证件类型
+        idCardNo: '', // 证件号码
+        personTag: '', // 人员标签
+        startTime: '', // 创建开始时间
+        endTime: '', // 创建结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '姓名',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '性别',
+          value: 'sexName',
+          align: 'center',
+          width: 60
+        },
+        {
+          text: '民族',
+          value: 'nationName',
+          width: 50,
+          align: 'center'
+        },
+        {
+          text: '采集原因',
+          value: 'collReasonName',
+          align: 'center'
+        },
+        {
+          text: '证件类型',
+          value: 'cardTypeName',
+          align: 'center',
+          width: 80
+        },
+        {
+          text: '证件号码',
+          value: 'idCardNo',
+          align: 'center'
+        },
+        {
+          text: '户籍地址',
+          value: 'residenceAddr',
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 120,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      head: {
+        show: true,
+        text: '数据列表'
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      const that = this
+      setTimeout(function() {
+        that.list = [
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' }
+        ]
+        that.total = 200
+        that.listLoading = false
+      }, 2000)
+    },
+    changePage(val) {
+      if (val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 00466c2..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -24,7 +24,7 @@
   name: 'AreaSelectTree',
   data() {
     return {
-      dialogFormVisible: true,
+      dialogFormVisible: false,
       defaultProps: {
         label: 'name',
         children: 'children',
@@ -36,12 +36,6 @@
     }
   },
   methods: {
-    // 获取数据
-    // fetchData() {
-    //   return new Promise(function(resolve, reject) {
-    //     getAreaTree(this.roleId)
-    //   })
-    // },
     // 初始化对话框
     initDialog() {
       this.dialogFormVisible = true
@@ -76,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index ff96295..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -150,11 +150,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 3f50639..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
new file mode 100644
index 0000000..9076d50
--- /dev/null
+++ b/src/router/modules/example.js
@@ -0,0 +1,21 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const exampleRouters = [{
+  path: 'example',
+  component: Layout,
+  redirect: '/exampleTable',
+  name: 'Example',
+  alwaysShow: true,
+  meta: {
+    title: '示例',
+    icon: 'icon-config' // 图标
+  },
+  children: [
+    {
+      path: '/exampleTable',
+      name: 'ExampleTable',
+      component: () => import('@/views/example/tableExample'),
+      meta: { title: '表格示例', icon: '' }
+    }
+  ]
+}]
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
new file mode 100644
index 0000000..d9dac99
--- /dev/null
+++ b/src/views/example/tableExample.vue
@@ -0,0 +1,140 @@
+<template>
+  <app-container>
+    <normal-table :data="list" :head="head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn">添加</el-button>
+        <el-button size="small" class="edit_btn">修改</el-button>
+        <el-button size="small" class="edit_btn">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="registerIris(scope.row)">采集</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+export default {
+  name: 'TableExample',
+  components: { AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        name: '', // 姓名
+        sex: '', // 性别
+        nation: '', // 民族
+        collReason: '', // 采集原因
+        cardType: '', // 证件类型
+        idCardNo: '', // 证件号码
+        personTag: '', // 人员标签
+        startTime: '', // 创建开始时间
+        endTime: '', // 创建结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '姓名',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '性别',
+          value: 'sexName',
+          align: 'center',
+          width: 60
+        },
+        {
+          text: '民族',
+          value: 'nationName',
+          width: 50,
+          align: 'center'
+        },
+        {
+          text: '采集原因',
+          value: 'collReasonName',
+          align: 'center'
+        },
+        {
+          text: '证件类型',
+          value: 'cardTypeName',
+          align: 'center',
+          width: 80
+        },
+        {
+          text: '证件号码',
+          value: 'idCardNo',
+          align: 'center'
+        },
+        {
+          text: '户籍地址',
+          value: 'residenceAddr',
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 120,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      head: {
+        show: true,
+        text: '数据列表'
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      const that = this
+      setTimeout(function() {
+        that.list = [
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' }
+        ]
+        that.total = 200
+        that.listLoading = false
+      }, 2000)
+    },
+    changePage(val) {
+      if (val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 00466c2..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -24,7 +24,7 @@
   name: 'AreaSelectTree',
   data() {
     return {
-      dialogFormVisible: true,
+      dialogFormVisible: false,
       defaultProps: {
         label: 'name',
         children: 'children',
@@ -36,12 +36,6 @@
     }
   },
   methods: {
-    // 获取数据
-    // fetchData() {
-    //   return new Promise(function(resolve, reject) {
-    //     getAreaTree(this.roleId)
-    //   })
-    // },
     // 初始化对话框
     initDialog() {
       this.dialogFormVisible = true
@@ -76,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index ff96295..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -150,11 +150,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 3f50639..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index d60482a..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
new file mode 100644
index 0000000..9076d50
--- /dev/null
+++ b/src/router/modules/example.js
@@ -0,0 +1,21 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const exampleRouters = [{
+  path: 'example',
+  component: Layout,
+  redirect: '/exampleTable',
+  name: 'Example',
+  alwaysShow: true,
+  meta: {
+    title: '示例',
+    icon: 'icon-config' // 图标
+  },
+  children: [
+    {
+      path: '/exampleTable',
+      name: 'ExampleTable',
+      component: () => import('@/views/example/tableExample'),
+      meta: { title: '表格示例', icon: '' }
+    }
+  ]
+}]
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
new file mode 100644
index 0000000..d9dac99
--- /dev/null
+++ b/src/views/example/tableExample.vue
@@ -0,0 +1,140 @@
+<template>
+  <app-container>
+    <normal-table :data="list" :head="head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn">添加</el-button>
+        <el-button size="small" class="edit_btn">修改</el-button>
+        <el-button size="small" class="edit_btn">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="registerIris(scope.row)">采集</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+export default {
+  name: 'TableExample',
+  components: { AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        name: '', // 姓名
+        sex: '', // 性别
+        nation: '', // 民族
+        collReason: '', // 采集原因
+        cardType: '', // 证件类型
+        idCardNo: '', // 证件号码
+        personTag: '', // 人员标签
+        startTime: '', // 创建开始时间
+        endTime: '', // 创建结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '姓名',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '性别',
+          value: 'sexName',
+          align: 'center',
+          width: 60
+        },
+        {
+          text: '民族',
+          value: 'nationName',
+          width: 50,
+          align: 'center'
+        },
+        {
+          text: '采集原因',
+          value: 'collReasonName',
+          align: 'center'
+        },
+        {
+          text: '证件类型',
+          value: 'cardTypeName',
+          align: 'center',
+          width: 80
+        },
+        {
+          text: '证件号码',
+          value: 'idCardNo',
+          align: 'center'
+        },
+        {
+          text: '户籍地址',
+          value: 'residenceAddr',
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 120,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      head: {
+        show: true,
+        text: '数据列表'
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      const that = this
+      setTimeout(function() {
+        that.list = [
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' }
+        ]
+        that.total = 200
+        that.listLoading = false
+      }, 2000)
+    },
+    changePage(val) {
+      if (val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 00466c2..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -24,7 +24,7 @@
   name: 'AreaSelectTree',
   data() {
     return {
-      dialogFormVisible: true,
+      dialogFormVisible: false,
       defaultProps: {
         label: 'name',
         children: 'children',
@@ -36,12 +36,6 @@
     }
   },
   methods: {
-    // 获取数据
-    // fetchData() {
-    //   return new Promise(function(resolve, reject) {
-    //     getAreaTree(this.roleId)
-    //   })
-    // },
     // 初始化对话框
     initDialog() {
       this.dialogFormVisible = true
@@ -76,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index ff96295..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -150,11 +150,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 3f50639..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index d60482a..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index 647b9f1..989050d 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -143,7 +143,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
new file mode 100644
index 0000000..9076d50
--- /dev/null
+++ b/src/router/modules/example.js
@@ -0,0 +1,21 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const exampleRouters = [{
+  path: 'example',
+  component: Layout,
+  redirect: '/exampleTable',
+  name: 'Example',
+  alwaysShow: true,
+  meta: {
+    title: '示例',
+    icon: 'icon-config' // 图标
+  },
+  children: [
+    {
+      path: '/exampleTable',
+      name: 'ExampleTable',
+      component: () => import('@/views/example/tableExample'),
+      meta: { title: '表格示例', icon: '' }
+    }
+  ]
+}]
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
new file mode 100644
index 0000000..d9dac99
--- /dev/null
+++ b/src/views/example/tableExample.vue
@@ -0,0 +1,140 @@
+<template>
+  <app-container>
+    <normal-table :data="list" :head="head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn">添加</el-button>
+        <el-button size="small" class="edit_btn">修改</el-button>
+        <el-button size="small" class="edit_btn">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="registerIris(scope.row)">采集</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+export default {
+  name: 'TableExample',
+  components: { AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        name: '', // 姓名
+        sex: '', // 性别
+        nation: '', // 民族
+        collReason: '', // 采集原因
+        cardType: '', // 证件类型
+        idCardNo: '', // 证件号码
+        personTag: '', // 人员标签
+        startTime: '', // 创建开始时间
+        endTime: '', // 创建结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '姓名',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '性别',
+          value: 'sexName',
+          align: 'center',
+          width: 60
+        },
+        {
+          text: '民族',
+          value: 'nationName',
+          width: 50,
+          align: 'center'
+        },
+        {
+          text: '采集原因',
+          value: 'collReasonName',
+          align: 'center'
+        },
+        {
+          text: '证件类型',
+          value: 'cardTypeName',
+          align: 'center',
+          width: 80
+        },
+        {
+          text: '证件号码',
+          value: 'idCardNo',
+          align: 'center'
+        },
+        {
+          text: '户籍地址',
+          value: 'residenceAddr',
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 120,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      head: {
+        show: true,
+        text: '数据列表'
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      const that = this
+      setTimeout(function() {
+        that.list = [
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' }
+        ]
+        that.total = 200
+        that.listLoading = false
+      }, 2000)
+    },
+    changePage(val) {
+      if (val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 00466c2..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -24,7 +24,7 @@
   name: 'AreaSelectTree',
   data() {
     return {
-      dialogFormVisible: true,
+      dialogFormVisible: false,
       defaultProps: {
         label: 'name',
         children: 'children',
@@ -36,12 +36,6 @@
     }
   },
   methods: {
-    // 获取数据
-    // fetchData() {
-    //   return new Promise(function(resolve, reject) {
-    //     getAreaTree(this.roleId)
-    //   })
-    // },
     // 初始化对话框
     initDialog() {
       this.dialogFormVisible = true
@@ -76,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index ff96295..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -150,11 +150,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 3f50639..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index d60482a..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index 647b9f1..989050d 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -143,7 +143,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
index f732a82..eee86d4 100644
--- a/src/views/system/role/listRole.vue
+++ b/src/views/system/role/listRole.vue
@@ -141,7 +141,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-
         } else {
           if (value.children && value.children.length > 0) {
             // this.deleteItem(value.children, des)

diff --git a/src/components/NomalTable/index.vue b/src/components/NomalTable/index.vue
new file mode 100644
index 0000000..c31c678
--- /dev/null
+++ b/src/components/NomalTable/index.vue
@@ -0,0 +1,226 @@
+<template>
+  <div>
+    <div>
+      <el-row v-if="head.show" class="table-title">
+        <el-col :span="6">
+          <div class="title-header">
+            <el-popover
+              v-model="visible"
+              placement="bottom-start"
+              trigger="click">
+              <div class="popper-div">
+                <div v-for="(column,index) in columnsChecked" :key="index">
+                  <el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
+                </div>
+                <div class="popper-btns">
+                  <el-button size="mini" type="" @click="initColumnsState">取消</el-button>
+                  <el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
+                </div>
+              </div>
+              <i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
+            </el-popover>
+            {{ head.text }}
+          </div>
+        </el-col>
+        <el-col :span="18" class="edit_btns">
+          <slot name="btns"/>
+        </el-col>
+      </el-row>
+      <el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
+        <!--内容列, 若columns存在且长度大于0-->
+        <template v-if="columnsFiltered && columnsFiltered.length>0">
+          <el-table-column
+            v-for="column in columnsFiltered"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align?column.align:'center'"
+            :show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </template>
+        <!--自定义的放这里-->
+        <slot name="columns"/>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page="query.offset"
+        :page-sizes="pageSizes"
+        :page-size="query.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NormalTable',
+  props: {
+    query: {
+      type: Object,
+      default: function() {
+        return {
+          offset: 1,
+          limit: 20
+        }
+      }
+    },
+    head: {
+      type: Object,
+      default: function() {
+        return {
+          show: true,
+          text: '数据列表'
+        }
+      }
+    }, // 是否显示头
+    listLoading: {
+      type: Boolean,
+      default: false
+    }, // loading状态
+    data: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 数据
+    total: {
+      type: Number,
+      default: 0
+    },
+    columns: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    }, // 列
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          needIndex: true
+        }
+      }
+    }, // 配置项
+    pageSizes: {
+      type: Array,
+      default: function() {
+        return [10, 20, 30]
+      }
+    },
+    size: {
+      type: String,
+      default: ''
+    }// 表格大小
+  },
+  data() {
+    return {
+      columnsFiltered: [], // 过滤后的列请款
+      columnsChecked: [], // 显示列选择情况
+      visible: false, // 弹窗显示情况
+      animateClass: '' // 按钮动画效果
+    }
+  },
+  created() {
+    // 初始化状态值为全部显示
+    this.initColumnsState()
+    this.changeColumns()
+  },
+  methods: {
+    // 初始化显示列状态
+    initColumnsState() {
+      this.columnsChecked = []
+      for (const column of this.columns) {
+        if (column.show === false) {
+          this.columnsChecked.push({ text: column.text, show: false })
+        } else {
+          this.columnsChecked.push({ text: column.text, show: true })
+        }
+      }
+      this.visible = false
+    },
+    // 修改显示列
+    changeColumns() {
+      this.columnsFiltered = []
+      for (const i in this.columns) {
+        if (this.columnsChecked[i].show === true) {
+          this.columnsFiltered.push(this.columns[i])
+        }
+      }
+      this.visible = false
+    },
+    // 序号计算
+    indexMethod(index) {
+      return this.query.limit * (this.query.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.query.limit = val
+      this.$emit('change', { size: val })
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.query.offset = val
+      this.$emit('change', { page: val })
+    },
+    // 按钮旋转动画
+    iconRotate() {
+      this.animateClass = 'animated swing'
+    },
+    // 移除动画
+    removeAnimateClass() {
+      this.animateClass = ''
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    padding-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 10px;
+        margin-right: 5px;
+      }
+      i:focus{
+        outline: none;
+      }
+    }
+  }
+  .edit_btns{
+    padding-top:7px;
+    padding-right:5px;
+    text-align: right;
+  }
+  .popper-div{
+    line-height: 1.5;
+    .popper-btns{
+      margin-top:10px;
+    }
+  }
+
+</style>
+
diff --git a/src/components/layout/AppContainer.vue b/src/components/layout/AppContainer.vue
new file mode 100644
index 0000000..39bfd87
--- /dev/null
+++ b/src/components/layout/AppContainer.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :class="hasPadding?'hasPadding':'noPadding'" class="app-container">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppContainer',
+  props: {
+    hasPadding: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .noPadding{
+
+  }
+  .hasPadding{
+    padding:10px 10px;
+  }
+</style>
diff --git a/src/router/modules/example.js b/src/router/modules/example.js
new file mode 100644
index 0000000..9076d50
--- /dev/null
+++ b/src/router/modules/example.js
@@ -0,0 +1,21 @@
+/* Layout */
+import Layout from '@/layout/Layout'
+export const exampleRouters = [{
+  path: 'example',
+  component: Layout,
+  redirect: '/exampleTable',
+  name: 'Example',
+  alwaysShow: true,
+  meta: {
+    title: '示例',
+    icon: 'icon-config' // 图标
+  },
+  children: [
+    {
+      path: '/exampleTable',
+      name: 'ExampleTable',
+      component: () => import('@/views/example/tableExample'),
+      meta: { title: '表格示例', icon: '' }
+    }
+  ]
+}]
diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
new file mode 100644
index 0000000..d9dac99
--- /dev/null
+++ b/src/views/example/tableExample.vue
@@ -0,0 +1,140 @@
+<template>
+  <app-container>
+    <normal-table :data="list" :head="head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn">添加</el-button>
+        <el-button size="small" class="edit_btn">修改</el-button>
+        <el-button size="small" class="edit_btn">删除</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click.stop="registerIris(scope.row)">采集</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
+</template>
+
+<script>
+import NormalTable from '@/components/NomalTable'
+import AppContainer from '@/components/layout/AppContainer'
+export default {
+  name: 'TableExample',
+  components: { AppContainer, NormalTable },
+  data() {
+    return {
+      listQuery: {
+        name: '', // 姓名
+        sex: '', // 性别
+        nation: '', // 民族
+        collReason: '', // 采集原因
+        cardType: '', // 证件类型
+        idCardNo: '', // 证件号码
+        personTag: '', // 人员标签
+        startTime: '', // 创建开始时间
+        endTime: '', // 创建结束时间
+        offset: 1,
+        limit: 20,
+        sort: 'createTime',
+        order: 'desc'
+      }, // 筛选条件
+      columns: [
+        {
+          text: '姓名',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '性别',
+          value: 'sexName',
+          align: 'center',
+          width: 60
+        },
+        {
+          text: '民族',
+          value: 'nationName',
+          width: 50,
+          align: 'center'
+        },
+        {
+          text: '采集原因',
+          value: 'collReasonName',
+          align: 'center'
+        },
+        {
+          text: '证件类型',
+          value: 'cardTypeName',
+          align: 'center',
+          width: 80
+        },
+        {
+          text: '证件号码',
+          value: 'idCardNo',
+          align: 'center'
+        },
+        {
+          text: '户籍地址',
+          value: 'residenceAddr',
+          align: 'center'
+        },
+        {
+          text: '创建时间',
+          value: 'createTime',
+          width: 120,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 列表加载动画
+      head: {
+        show: true,
+        text: '数据列表'
+      }
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      const that = this
+      setTimeout(function() {
+        that.list = [
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' },
+          { name: '张三', sexName: '男', nationName: '汉族', collReasonName: '工作人员', cardTypeName: '身份证', idCardNo: '1101264987431551155', residenceAddr: '北京市' }
+        ]
+        that.total = 200
+        that.listLoading = false
+      }, 2000)
+    },
+    changePage(val) {
+      if (val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
index 00466c2..c2afbdd 100644
--- a/src/views/system/area/areaSelectTree.vue
+++ b/src/views/system/area/areaSelectTree.vue
@@ -24,7 +24,7 @@
   name: 'AreaSelectTree',
   data() {
     return {
-      dialogFormVisible: true,
+      dialogFormVisible: false,
       defaultProps: {
         label: 'name',
         children: 'children',
@@ -36,12 +36,6 @@
     }
   },
   methods: {
-    // 获取数据
-    // fetchData() {
-    //   return new Promise(function(resolve, reject) {
-    //     getAreaTree(this.roleId)
-    //   })
-    // },
     // 初始化对话框
     initDialog() {
       this.dialogFormVisible = true
@@ -76,8 +70,8 @@
 <style rel="stylesheet/scss" lang="scss">
   .area-select-dialog{
     width: 400px;
-  .el-scrollbar__wrap{
-    overflow-x: hidden !important;
-  }
+    .el-scrollbar__wrap{
+      overflow-x: hidden !important;
+    }
   }
 </style>
diff --git a/src/views/system/log/listLog.vue b/src/views/system/log/listLog.vue
index ff96295..da954b9 100644
--- a/src/views/system/log/listLog.vue
+++ b/src/views/system/log/listLog.vue
@@ -150,11 +150,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/log/loginLog.vue b/src/views/system/log/loginLog.vue
index 3f50639..9e11c6f 100644
--- a/src/views/system/log/loginLog.vue
+++ b/src/views/system/log/loginLog.vue
@@ -132,11 +132,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取日志数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getLoginLogList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = parseInt(response.data.total)
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index d60482a..a824bdd 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -53,7 +53,7 @@
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button :loading="btnLoading" type="primary" @click="saveData">保存</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
   </el-dialog>
@@ -71,6 +71,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update
+      btnLoading: false, // 保存按钮的加载中状态
       resourceForm: {
         id: '',
         name: '',
@@ -127,6 +128,7 @@
     initDialog: function(dialogStatus, dialogFormVisible, row = null) {
       this.dialogStatus = dialogStatus
       this.dialogFormVisible = dialogFormVisible
+      this.btnLoading = false
       this.fetchPcode()
       this.fetchResourceType()
       if (dialogStatus === 'create') { // 如果是新增，清除验证
@@ -193,6 +195,7 @@
       this.$refs['dataForm'].validate((valid) => {
         console.log(this.resourceForm)
         if (valid) {
+          this.btnLoading = true
           addResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$confirm('新增成功，是否继续新增?', '提示', {
@@ -200,6 +203,7 @@
                 cancelButtonText: '否',
                 type: 'info'
               }).then(() => {
+                this.btnLoading = false
                 this.resetForm()
                 this.$nextTick(() => {
                   this.$refs['dataForm'].clearValidate()
@@ -210,6 +214,8 @@
                 this.dialogFormVisible = false
               })
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
@@ -218,12 +224,15 @@
     updateData: function() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
+          this.btnLoading = true
           updateResource(this.resourceForm).then(response => {
             if (response.code === 200) {
               this.$message.success('修改成功')
               this.$emit('watchChild')
               this.dialogFormVisible = false
             }
+          }).catch(_ => { // 异常情况，loading置为false
+            this.btnLoading = false
           })
         }
       })
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index 647b9f1..989050d 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -143,7 +143,6 @@
         if (value.id === des.id) {
           console.log('findit')
           list.splice(index, 1)
-
         } else {
           if (value.children && value.children.length > 0) {
             this.deleteItem(value.children, des)
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
index f732a82..eee86d4 100644
--- a/src/views/system/role/listRole.vue
+++ b/src/views/system/role/listRole.vue
@@ -141,7 +141,6 @@
       list.forEach((value, index) => {
         if (value.id === des.id) {
           list.splice(index, 1)
-
         } else {
           if (value.children && value.children.length > 0) {
             // this.deleteItem(value.children, des)
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
index cf0171f..44beb6b 100644
--- a/src/views/system/user/listUser.vue
+++ b/src/views/system/user/listUser.vue
@@ -74,7 +74,7 @@
               <el-tag :type="tagNames[scope.row.statusName]" size="medium">{{ scope.row.statusName }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column v-if="hasPerm('/mgr/freeze')" label="操作" width="60">
+          <el-table-column v-if="hasPerm('/mgr/freeze')" label="操作" align="center" width="60">
             <template slot-scope="scope">
               <el-button v-if="hasPerm('/mgr/freeze')" :type="btnStatus[scope.row.statusName]" size="mini" @click="freeze(scope.row)">{{ btnNames[scope.row.statusName] }}</el-button>
             </template>
@@ -130,7 +130,7 @@
       },
       registerTime: [], // 注册时间范围
       tagNames: {
-        '已冻结': 'warning',
+        '已冻结': 'danger',
         '启用': 'success'
       },
       btnNames: {
@@ -138,8 +138,8 @@
         '启用': '冻结'
       },
       btnStatus: {
-        '已冻结': 'success',
-        '正常': 'danger'
+        '已冻结': '',
+        '启用': 'primary'
       },
       columns: [
         {
@@ -323,11 +323,14 @@
     },
     // 查询数据
     search() {
-      this.fetchData()
+      this.fetchData(false)
     },
     // 获取用户数据
-    fetchData() {
+    fetchData(isNowPage = true) {
       this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
       getUserList(this.listQuery).then(response => {
         this.list = response.data.rows
         this.total = response.data.total