diff --git a/src/components/SearchForm/advancedForm/index.vue b/src/components/SearchForm/advancedForm/index.vue
index ca24d19..2df8d00 100644
--- a/src/components/SearchForm/advancedForm/index.vue
+++ b/src/components/SearchForm/advancedForm/index.vue
@@ -1,29 +1,120 @@
 <template>
   <div class="advancedForm">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
-      <el-form-item label="审批人">
-        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
-      </el-form-item>
-      <el-form-item label="活动区域">
-        <el-select v-model="formInline.region" placeholder="活动区域">
-          <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
-      </el-form-item>
+    <el-form
+        ref="ruleFormRef"
+        :inline="true"
+        :label-position="'right'"
+        :model="formInline"
+        class="form-inline">
+      <el-row
+          :class="{
+            'not-show':byHeight&&!isExpand
+          }"
+          :gutter="gutterWidth">
+        <el-col :span="item.span"
+                v-for="item,index in columns"
+                :key="item.name"
+                v-show="byHeight?true:(index< (showRow*3)||isExpand)">
+          <el-form-item :label="item.title" :label-width="labelWidth" v-if="item.type==='input'">
+            <el-input
+                clearable
+                v-model="formInline[item.name]" :placeholder="item.placeholder" />
+          </el-form-item>
+          <template v-else-if="item.type==='date'">
+            <el-form-item :label="item.title" :label-width="labelWidth" >
+              <el-date-picker
+                  value-format="YYYY-MM-DD"
+                  v-model="formInline[item.name]"
+                  type="date"
+                  :placeholder="item.placeholder"
+              />
+            </el-form-item>
+          </template>
+
+        </el-col>
+      </el-row>
     </el-form>
+    <div class="search-btn">
+      <el-button type="primary" @click="onSubmit">查询</el-button>
+      <el-button  @click="resetForm(ruleFormRef)">重置</el-button>
+      <el-button link type="primary" @click="isExpand = !isExpand">{{ isExpand ? '合并' : '展开'}}<el-icon>
+        <arrow-down v-if="!isExpand" />
+        <arrow-up v-else /> </el-icon
+      ></el-button>
+    </div>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import {reactive, ref} from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+const ruleFormRef = ref<FormInstance>()
+let props = defineProps({
+  // 宽度
+  labelWidth: {
+    default: "100px",
+  },
+  gutterWidth: {
+    type: Number,
+    default: 24,
+  },
+  showRow:{
+    type: Number,
+    default: 1,
+  },
+  columns:{
+    type:Array,
+    default:()=>[]
+  },
+  byHeight:{
+    type:Boolean,
+    default:false
+  }
+})
+const emit = defineEmits(['submit','reset'])
+// 收缩展开
+const isExpand = ref(false)
 
+const formInline = reactive({
+})
+
+for(let item of props.columns){
+  formInline[item.name] = null
+}
+
+const onSubmit = () => {
+  emit('submit',formInline)
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  console.log('formEl',formEl)
+  if (!formEl) return
+  formEl.resetFields()
+  const keys = Object.keys(formInline);
+  keys.forEach(key => {
+    formInline[key] = null;
+  });
+  emit("reset", formInline);
+}
 </script>
 
 <style lang="scss" scoped>
 .advancedForm{
-  width: 100%;
-  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  .form-inline{
+    flex: 1;
+  }
+  .el-form--inline .el-form-item{
+    width: 100%;
+    margin-right: 10px;
+  }
+  .search-btn{
+    margin-left: 40px;
+  }
+  .not-show{
+    height: 40px;
+    overflow: hidden;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Table/EditableProTable/index.vue b/src/components/Table/EditableProTable/index.vue
index 783fceb..52152bf 100644
--- a/src/components/Table/EditableProTable/index.vue
+++ b/src/components/Table/EditableProTable/index.vue
@@ -42,7 +42,6 @@
                       :value="ite.value"
                   />
                 </el-select>
-
                 <span v-else>{{ filterOption(item, scope) }}</span>
               </template>
 
diff --git a/src/views/form/advancedForm/index.vue b/src/views/form/advancedForm/index.vue
new file mode 100644
index 0000000..6559d85
--- /dev/null
+++ b/src/views/form/advancedForm/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="advancedForm">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span style="margin-right: 100px">收缩表单 通过v-show来控制显隐藏</span>
+          <el-button @click="showRow(2)" type="primary" link>显示两行</el-button>
+          <el-button @click="showRow(1)" type="primary" link>显示一行</el-button>
+        </div>
+      </template>
+      <AdvancedForm :columns="columns" @submit="onSubmit" :showRow="row"/>
+    </el-card>
+
+    <el-card class="box-card" style="margin-top: 20px">
+      <template #header>
+        <div class="card-header">
+          <span>收缩表单 通过高度来控制显隐藏</span>
+        </div>
+      </template>
+      <AdvancedForm :columns="columns" @submit="onSubmit" :byHeight="true"/>
+
+    </el-card>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AdvancedForm from "@/components/SearchForm/advancedForm/index.vue"
+import {reactive, ref} from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+let columns = [
+    {
+      type: 'input',
+      name:"name1",
+      title:'字段1',
+      placeholder: "字段1",
+      span: 8,
+    },
+    {
+      type: 'date',
+      name:"name2",
+      title:'字段2',
+      placeholder: "字段2",
+      span: 8,
+    },
+    {
+      type: 'input',
+      name:"name3",
+      title:'字段3',
+      placeholder: "字段3",
+      span: 8,
+    },
+    {
+      type: 'input',
+      name:"name4",
+      title:'字段4',
+      placeholder: "字段4",
+      span: 8,
+    },
+  {
+    type: 'input',
+    name:"name5",
+    title:'字段5',
+    placeholder: "字段5",
+    span: 8,
+  },{
+    type: 'input',
+    name:"name6",
+    title:'字段6',
+    placeholder: "字段6",
+    span: 8,
+  },{
+    type: 'input',
+    name:"name7",
+    title:'字段7',
+    placeholder: "字段7",
+    span: 8,
+  },
+  {
+    type: 'input',
+    name:"name8",
+    title:'字段8',
+    placeholder: "字段8",
+    span: 8,
+  },{
+    type: 'input',
+    name:"name9",
+    title:'字段9',
+    placeholder: "字段9",
+    span: 8,
+  }
+]
+const formValue= ref({})
+const row = ref(1)
+const onSubmit = (formInline) => {
+  formValue.value = formInline
+  ElMessage.success(JSON.stringify(formInline))
+}
+const showRow = (number)=>{
+  row.value = number
+}
+
+</script>
+
+<style lang="scss" scoped>
+.advancedForm{
+  padding: 20px;
+}
+</style>