diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..4945226
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>

diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..4945226
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>

diff --git a/src/components/SearchArea/SearchArea.vue b/src/components/SearchArea/SearchArea.vue
new file mode 100644
index 0000000..4945226
--- /dev/null
+++ b/src/components/SearchArea/SearchArea.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="search-div">
+    <div :class="{'search-left':type==='seperate', 'search-all':type==='default'}">
+      <slot/>
+      <el-collapse-transition>
+        <div v-if="needSearchMore && searchMoreType=='default'" v-show="searchMoreShow">
+          <slot name="searchMore"/>
+        </div>
+      </el-collapse-transition>
+      <el-button v-if="type=='default'" :size="size" type="primary" class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
+      <el-button v-if="type=='default' && needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="type=='default' && needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <div v-if="type=='seperate'" class="search-right">
+      <el-button :size="size" type="primary" icon="el-icon-search" class="search-btn" @click="search">搜索</el-button>
+      <el-button v-if="needSearchMore" :size="size" type="primary" class="search-btn" icon="el-icon-magic-stick" @click="toggleSearchMore">高级检索</el-button>
+      <el-button v-if="needClear" :size="size" type="warning" class="search-btn" icon="el-icon-delete" @click="clearInput">重置</el-button>
+    </div>
+    <!-- 弹出框式高级检索 -->
+    <el-dialog v-if="needSearchMore && searchMoreType=='dialog'" :visible.sync="searchMoreShow" title="高级检索" append-to-body>
+      <div>
+        <slot name="searchMore"/>
+        <div slot="footer" class="dialog-footer">
+          <el-button :size="size" type="primary" @click="dialogSearch">搜索</el-button>
+          <el-button v-if="needClear" :size="size" type="" @click="dialogClearInput">重置</el-button>
+          <el-button v-if="needSearchMore" :size="size" type="" @click="dialogCancel">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchArea',
+  props: {
+    type: {
+      type: String,
+      default: 'default'
+    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
+    needClear: {
+      type: Boolean,
+      default: false
+    }, // 是否需要重置按钮
+    needSearchMore: {
+      type: Boolean,
+      default: false
+    }, // 是否需要高级检索
+    searchMoreType: {
+      type: String,
+      default: 'default'
+    }, // 高级检索的样式，default页面内，dialog弹窗
+    size: {
+      type: String,
+      default: ''
+    }// 按钮及输入框大小
+  },
+  data() {
+    return {
+      searchMoreShow: false
+    }
+  },
+  methods: {
+    search() {
+      this.$emit('search')
+    },
+    clearInput() {
+      this.$emit('clear')
+    },
+    toggleSearchMore() {
+      this.searchMoreShow = !this.searchMoreShow
+    },
+    dialogSearch() {
+      this.searchMoreShow = false
+      this.search()
+    },
+    dialogClearInput() {
+      this.searchMoreShow = false
+      this.clearInput()
+    },
+    dialogCancel() {
+      this.searchMoreShow = false
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-div{
+    display: -webkit-flex; /* Safari */
+    display: flex;
+    justify-content:space-between;
+    .search-btn{
+      margin-bottom:10px;
+    }
+  }
+  .dialog-footer{
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/components/SearchArea/SearchItem.vue b/src/components/SearchArea/SearchItem.vue
new file mode 100644
index 0000000..84e0096
--- /dev/null
+++ b/src/components/SearchArea/SearchItem.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="search-item">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchItem',
+  mounted() {
+    // 如果没有子元素，则控制显示为none, 不占位
+    const searchitem = this.$el
+    if (searchitem.childNodes && searchitem.childNodes.length === 0) {
+      searchitem.style.display = 'none'
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .search-item{
+    display: inline-block;
+    margin-bottom:10px;
+    vertical-align: top;
+    box-sizing: inherit;
+  }
+  .search-item{
+    margin-right: 5px;
+  }
+</style>
diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
deleted file mode 100644
index 5937705..0000000
--- a/src/components/SearchArea/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div class="search-div">
-    <div class="search-left">
-      <slot name="search"/>
-      <el-button v-if="type=='default'" :size="size" class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-      <el-button v-if="type=='default' && needClear" :size="size" class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-    </div>
-    <div v-if="type=='seperate'" class="search-right">
-      <el-button :size="size" class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-      <el-button v-if="needClear" :size="size" class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
-    </div>
-    <div class="clearfloat"/>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SearchArea',
-  props: {
-    type: {
-      type: String,
-      default: 'default'
-    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
-    needClear: {
-      type: Boolean,
-      default: false
-    }, // 是否需要重置按钮
-    needSearchMore: {
-      type: Boolean,
-      default: false
-    }// 是否需要高级检索
-  },
-  methods: {
-    search() {
-      this.$emit('search')
-    },
-    clearInput() {
-      this.$emit('clear')
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .search-div{
-    margin-bottom: 10px;
-    .search-left{
-      float:left;
-      width: calc(100% - 160px);
-    }
-    .search-right{
-      float:right;
-      width: 160px;
-    }
-  }
-</style>