diff --git a/src/views/example/tableExample.vue b/src/views/example/tableExample.vue
index d9dac99..a313e57 100644
--- a/src/views/example/tableExample.vue
+++ b/src/views/example/tableExample.vue
@@ -1,6 +1,48 @@
 <template>
   <app-container>
-    <normal-table :data="list" :head="head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+    <search-area :need-clear="true" :need-search-more="true" type="seperate" search-more-type="default" @search="fetchData" @clear="clearInput">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.name" placeholder="姓名" clearable/>
+      </search-item>
+      <search-item/>
+      <search-item>
+        <el-select v-model="listQuery.sex" placeholder="性别" clearable>
+          <el-option label="男" value="男"/>
+        </el-select>
+      </search-item>
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          type="datetimerange"
+          range-separator="至"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          start-placeholder="创建开始时间"
+          end-placeholder="创建结束时间"/>
+      </search-item>
+      <!--高级检索-->
+      <div slot="searchMore">
+        <search-item>
+          <el-input v-model.trim="listQuery.name" placeholder="姓名" clearable/>
+        </search-item>
+        <search-item/>
+        <search-item>
+          <el-select v-model="listQuery.sex" placeholder="性别" clearable>
+            <el-option label="男" value="男"/>
+          </el-select>
+        </search-item>
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="创建开始时间"
+            end-placeholder="创建结束时间"/>
+        </search-item>
+      </div>
+    </search-area>
+    <normal-table :data="list" :head="tableOption.head" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" :tools-option="tableOption.toolsOption" @change="changePage">
       <template slot="btns">
         <el-button size="small" class="edit_btn">添加</el-button>
         <el-button size="small" class="edit_btn">修改</el-button>
@@ -22,9 +64,11 @@
 <script>
 import NormalTable from '@/components/NomalTable'
 import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
 export default {
   name: 'TableExample',
-  components: { AppContainer, NormalTable },
+  components: { SearchItem, SearchArea, AppContainer, NormalTable },
   data() {
     return {
       listQuery: {
@@ -88,13 +132,23 @@
           align: 'center'
         }
       ], // 显示列
+      timeRange: [], // 时间范围
       list: [], // 列表数据
       total: 0, // 数据总数
       listLoading: true, // 列表加载动画
-      head: {
-        show: true,
-        text: '数据列表'
-      }
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   created() {
@@ -122,14 +176,19 @@
         that.listLoading = false
       }, 2000)
     },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
     changePage(val) {
-      if (val.size) {
+      if (val && val.size) {
         this.listQuery.limit = val.size
       }
-      if (val.page) {
+      if (val && val.page) {
         this.listQuery.offset = val.page
       }
       this.fetchData()
+    },
+    // 重置后的操作， 若不需要显示重置按钮则不需要写
+    clearInput() {
+      this.$message.success('clearInput')
     }
   }
 }