diff --git a/docs/demos/ma-form/conditional-rendering/index.vue b/docs/demos/ma-form/conditional-rendering/index.vue
index f20bdcd..9269e75 100644
--- a/docs/demos/ma-form/conditional-rendering/index.vue
+++ b/docs/demos/ma-form/conditional-rendering/index.vue
@@ -765,8 +765,6 @@ const handleClear = () => {
 <style scoped>
 .conditional-rendering-demo {
   max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
 }
 
 .demo-description {
diff --git a/docs/demos/ma-pro-table-examples/advanced-search/index.vue b/docs/demos/ma-pro-table-examples/advanced-search/index.vue
index fd09f4b..76960e8 100644
--- a/docs/demos/ma-pro-table-examples/advanced-search/index.vue
+++ b/docs/demos/ma-pro-table-examples/advanced-search/index.vue
@@ -21,8 +21,8 @@ const formData = reactive({
   // 部门，多选
   department: [],
   // 薪资范围
-  salaryMin: 0,
-  salaryMax: 10,
+  salaryMin: undefined,
+  salaryMax: undefined,
   // 工作经验
   experience: [0, 15], // 如果 slider range 默认值
   // 入职时间范围
@@ -30,12 +30,70 @@ const formData = reactive({
   // 职级，多选
   level: [],
   // 绩效评分
-  performanceMin: 1,
-  performanceMax: 2,
+  performanceMin: undefined,
+  performanceMax: undefined,
   // 在职状态
   status: '',
 })
 
+// 通用过滤方法
+function filterData(data: any[], params: any) {
+  return data.filter(item => {
+    return Object.entries(params).every(([key, value]) => {
+      if (value == null || value === '' || (Array.isArray(value) && value.length === 0)) {
+        return true // 跳过空参数
+      }
+
+      switch (key) {
+        case 'name': // 模糊匹配
+          return item.name.includes(value)
+
+        case 'department': // 多选匹配
+          return Array.isArray(value) && value.some((dep: string) => item.department.includes(dep))
+
+        case 'salaryMin':
+          return item.salary >= value
+        case 'salaryMax':
+          return item.salary <= value
+
+        case 'experience': // 工作经验范围
+          if (Array.isArray(value) && value.length === 2) {
+            const [min, max] = value
+            return item.experience >= min && item.experience <= max
+          }
+          return true
+
+        case 'joinDateRange': // 入职时间范围
+          if (Array.isArray(value) && value.length === 2) {
+            const [startDate, endDate] = value
+            const itemDate = new Date(item.joinDate)
+            const start = new Date(startDate)
+            const end = new Date(endDate)
+            return itemDate >= start && itemDate <= end
+          }
+          return true
+
+        case 'level': // 职级多选
+          if (Array.isArray(value) && value.length > 0) {
+            return value.includes(item.level)
+          }
+          return true
+
+        case 'performanceMin':
+          return item.performance >= value
+        case 'performanceMax':
+          return item.performance <= value
+
+        case 'status': // 精确匹配
+          return item.status === value
+
+        default:
+          return true
+      }
+    })
+  })
+}
+
 // 模拟 API 接口
 const getAdvancedList = async (params: any) => {
   console.log('高级搜索参数:', params)
@@ -114,13 +172,15 @@ const getAdvancedList = async (params: any) => {
     }
   ]
 
+  const filtered = filterData(data, params)
+
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({
         code: 200,
         data: {
-          list: data,
-          total: data.length
+          list: filtered,
+          total: filtered.length
         }
       })
     }, 800)
@@ -141,11 +201,15 @@ const options = reactive<MaProTableOptions>({
       pageSize: 10
     }
   },
+  searchFormOptions: { labelWidth: '90px' },
   searchOptions: {
     fold: true,
+    cols: { xs: 2, sm: 2, md: 2, lg: 2, xl: 2 },
     text: {
-      searchBtn: () => '高级搜索',
-      resetBtn: () => '清空条件'
+      searchBtn: () => '立即搜索',
+      resetBtn: () => '重置条件',
+      isFoldBtn: () => '展开更多条件',
+      notFoldBtn: () => '收起条件'
     }
   },
   header: {
@@ -159,12 +223,32 @@ const options = reactive<MaProTableOptions>({
   },
   onSearchReset: (form: Record<string, any>) => {
     ElMessage.info('搜索条件已重置')
+
+    // 重置表单数据到初始状态
+    Object.assign(formData, {
+      name: '',
+      department: [],
+      salaryMin: undefined,
+      salaryMax: undefined,
+      experience: [0, 15],
+      joinDateRange: [],
+      level: [],
+      performanceMin: undefined,
+      performanceMax: undefined,
+      status: '',
+    })
+
+    // 重新请求数据
+    if (tableRef.value) {
+      tableRef.value.refresh()
+    }
+
     return form
   }
 })
 
 // 表格架构
-const schema = reactive<MaProTableSchema>({
+const schema = ref<MaProTableSchema>({
   searchItems: [
     {
       label: '姓名',
@@ -196,34 +280,34 @@ const schema = reactive<MaProTableSchema>({
     {
       label: '薪资范围',
       prop: 'salaryRange',
-      render: ({ formData }: any) => (
-        <div style="display: flex; gap: 8px; align-items: center;">
-          <el-input-number
-            v-model={formData.salaryMin}
-            placeholder="最低薪资"
-            min={0}
-            max={100000}
-            controls-position="right"
-            style="width: 140px;"
-          />
-          <span>-</span>
-          <el-input-number
-            v-model={formData.salaryMax}
-            placeholder="最高薪资"
-            min={0}
-            max={100000}
-            controls-position="right"
-            style="width: 140px;"
-          />
-        </div>
-      ),
-      span: 2
+      render: () => <div class="!p-0 flex gap-2 w-full isPadding" />,
+      children: [
+        {
+          prop: 'salaryMin',
+          render: 'InputNumber',
+          renderProps: {
+            controlsPosition: 'right',
+            placeholder: '最低薪资',
+          },
+          cols: { md: 12, xs: 24 },
+        },
+        {
+          prop: 'salaryMax',
+          render: 'InputNumber',
+          renderProps: {
+            controlsPosition: 'right',
+            placeholder: '最高薪资',
+          },
+          cols: { md: 12, xs: 24 },
+        },
+      ],
     },
     {
       label: '工作经验',
       prop: 'experience',
       render: 'slider',
       renderProps: {
+        size: 'small',
         min: 0,
         max: 15,
         range: true,
@@ -266,28 +350,27 @@ const schema = reactive<MaProTableSchema>({
     {
       label: '绩效评分',
       prop: 'performanceRange',
-      render: ({ formData }: any) => (
-        <div style="display: flex; gap: 8px; align-items: center;">
-          <el-input-number
-            v-model={formData.performanceMin}
-            placeholder="最低分"
-            min={0}
-            max={100}
-            controls-position="right"
-            style="width: 120px;"
-          />
-          <span>-</span>
-          <el-input-number
-            v-model={formData.performanceMax}
-            placeholder="最高分"
-            min={0}
-            max={100}
-            controls-position="right"
-            style="width: 120px;"
-          />
-        </div>
-      ),
-      span: 2
+      render: () => <div class="!p-0 flex gap-2 w-full isPadding" />,
+      children: [
+        {
+          prop: 'performanceMin',
+          render: 'InputNumber',
+          renderProps: {
+            controlsPosition: 'right',
+            placeholder: '最低分',
+          },
+          cols: { md: 12, xs: 24 },
+        },
+        {
+          prop: 'performanceMax',
+          render: 'InputNumber',
+          renderProps: {
+            controlsPosition: 'right',
+            placeholder: '最高分',
+          },
+          cols: { md: 12, xs: 24 },
+        },
+      ],
     },
     {
       label: '在职状态',
@@ -434,10 +517,6 @@ const schema = reactive<MaProTableSchema>({
 </script>
 
 <style scoped>
-.demo-advanced-search {
-  padding: 20px;
-}
-
 .demo-advanced-search h3 {
   margin-bottom: 8px;
   color: #333;
@@ -448,4 +527,8 @@ const schema = reactive<MaProTableSchema>({
   color: #666;
   font-size: 14px;
 }
+
+:deep(.isPadding > div) {
+  padding-left: 0 !important;
+}
 </style>
\ No newline at end of file
diff --git a/docs/demos/ma-pro-table-examples/basic/index.vue b/docs/demos/ma-pro-table-examples/basic/index.vue
index 1cff541..e789c3e 100644
--- a/docs/demos/ma-pro-table-examples/basic/index.vue
+++ b/docs/demos/ma-pro-table-examples/basic/index.vue
@@ -2,7 +2,7 @@
   <div class="demo-basic">
     <h3>基础用法</h3>
     <p>最简单的表格使用方式，包含搜索、分页和基本操作功能。</p>
-    
+
     <MaProTable ref="tableRef" :options="options" :schema="schema" />
   </div>
 </template>
@@ -15,10 +15,7 @@ import { ElMessage, ElTag } from 'element-plus'
 const tableRef = ref<MaProTableExpose>()
 
 // 模拟 API 接口
-const getBasicList = async (params: any) => {
-  console.log('请求参数:', params)
-  
-  // 模拟数据
+const getBasicList = async (params: Record<string, any>) => {
   const data = [
     { id: 1, name: '张三', department: '技术部', position: '前端工程师', salary: 15000, status: 1, createTime: '2024-01-15' },
     { id: 2, name: '李四', department: '产品部', position: '产品经理', salary: 18000, status: 1, createTime: '2024-01-16' },
@@ -26,17 +23,25 @@ const getBasicList = async (params: any) => {
     { id: 4, name: '赵六', department: '技术部', position: '后端工程师', salary: 16000, status: 1, createTime: '2024-01-18' },
     { id: 5, name: '孙七', department: '运营部', position: '运营专员', salary: 10000, status: 1, createTime: '2024-01-19' }
   ]
-  
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({
-        code: 200,
-        data: {
-          list: data,
-          total: data.length
-        }
-      })
-    }, 500)
+
+  // 获取搜索字段列表
+  const searchFields = schema.searchItems.map(item => item.prop)
+
+  // 只过滤搜索字段
+  const filtered = data.filter(item => {
+    return searchFields.every(key => {
+      const value = params[key]
+      if (!value) return true
+      return item[key]?.toString().includes(value)
+    })
+  })
+
+  return Promise.resolve({
+    code: 200,
+    data: {
+      list: filtered,
+      total: filtered.length
+    }
   })
 }
 
@@ -84,6 +89,20 @@ const schema = reactive<MaProTableSchema>({
           { label: '运营部', value: '运营部' }
         ]
       }
+    },
+    {
+      label: '职位',
+      prop: 'position',
+      render: 'select',
+      renderProps: {
+        options: [
+          { label: '前端工程师', value: '前端工程师' },
+          { label: '产品经理', value: '产品经理' },
+          { label: 'UI设计师', value: 'UI设计师' },
+          { label: '后端工程师', value: '后端工程师' },
+          { label: '运营专员', value: '运营专员' }
+        ]
+      }
     }
   ],
   tableColumns: [
@@ -92,13 +111,13 @@ const schema = reactive<MaProTableSchema>({
     { label: '部门', prop: 'department', width: 120 },
     { label: '职位', prop: 'position', width: 150 },
     { label: '薪资', prop: 'salary', width: 120, formatter: (row: any) => `￥${row.salary.toLocaleString()}` },
-    { 
-      label: '状态', 
+    {
+      label: '状态',
       prop: 'status',
       cellRender: ({ row }) => (
-          <ElTag type={row.status === 1 ? 'success' : 'danger'}>
-            {row.status === 1 ? '在职' : '离职'}
-          </ElTag>
+        <ElTag type={row.status === 1 ? 'success' : 'danger'}>
+          {row.status === 1 ? '在职' : '离职'}
+        </ElTag>
       ),
     },
     { label: '入职时间', prop: 'createTime', width: 150 },
diff --git a/docs/zh/front/component/ma-pro-table/examples/advanced-search.md b/docs/zh/front/component/ma-pro-table/examples/advanced-search.md
index a0be1c4..125cc11 100644
--- a/docs/zh/front/component/ma-pro-table/examples/advanced-search.md
+++ b/docs/zh/front/component/ma-pro-table/examples/advanced-search.md
@@ -15,6 +15,7 @@
 ## 搜索组件类型
 
 ### 基础输入组件
+
 ```javascript
 {
   label: '姓名',
@@ -28,6 +29,7 @@
 ```
 
 ### 选择器组件
+
 ```javascript
 // 单选
 {
@@ -61,36 +63,39 @@
 ```
 
 ### 数字范围组件
+
+使用`children`方式需要`"@mineadmin/form": "^1.0.53",` 版本支持
+
 ```javascript
 {
   label: '薪资范围',
   prop: 'salaryRange',
-  render: () => (
-    <div style="display: flex; gap: 8px; align-items: center;">
-      <el-input-number
-        v-model={formData.salaryMin}
-        placeholder="最低薪资"
-        min={0}
-        max={100000}
-        controls-position="right"
-        style="width: 140px;"
-      />
-      <span>-</span>
-      <el-input-number
-        v-model={formData.salaryMax}
-        placeholder="最高薪资"
-        min={0}
-        max={100000}
-        controls-position="right"
-        style="width: 140px;"
-      />
-    </div>
-  ),
-  span: 2
-}
+  render: () => <div class="!p-0 flex gap-2 w-full" />,
+  children: [
+    {
+      prop: 'salaryMin',
+      render: 'InputNumber',
+      renderProps: {
+        controlsPosition: 'right',
+        placeholder: '最低薪资',
+      },
+      cols: { md: 12, xs: 24 },
+    },
+    {
+      prop: 'salaryMax',
+      render: 'InputNumber',
+      renderProps: {
+        controlsPosition: 'right',
+        placeholder: '最高薪资',
+      },
+      cols: { md: 12, xs: 24 },
+    },
+  ],
+},
 ```
 
 ### 日期范围组件
+
 ```javascript
 {
   label: '入职时间',
@@ -107,6 +112,7 @@
 ```
 
 ### 滑块组件
+
 ```javascript
 {
   label: '工作经验',
@@ -127,6 +133,7 @@
 ```
 
 ### 复选框组组件
+
 ```javascript
 {
   label: '职级',
@@ -144,6 +151,7 @@
 ```
 
 ### 单选框组组件
+
 ```javascript
 {
   label: '在职状态',
@@ -160,6 +168,7 @@
 ## 自定义渲染组件
 
 ### JSX 自定义渲染
+
 对于复杂的输入组件，可以使用 JSX 进行自定义渲染：
 
 ```javascript
@@ -199,6 +208,7 @@ const formData = reactive({
 ```
 
 ### 组件配置要点
+
 - `options` 数组直接配置在搜索项中，不需要嵌套在 `renderProps` 内
 - `renderProps` 用于配置组件的其他属性（如 placeholder、multiple 等）
 - 自定义 JSX 渲染需要配合响应式数据使用
@@ -207,41 +217,44 @@ const formData = reactive({
 ## 搜索配置
 
 ### 展示控制
+
 ```javascript
 const options = {
   searchOptions: {
-    showNumber: 3,      // 默认显示3个搜索项
-    layout: 'auto'      // 布局模式：auto/inline/vertical
-  }
-}
+    showNumber: 3, // 默认显示3个搜索项
+    layout: "auto", // 布局模式：auto/inline/vertical
+  },
+};
 ```
 
 ### 搜索事件
+
 ```javascript
 const options = {
   onSearchSubmit: (form) => {
-    console.log('搜索条件:', form)
+    console.log("搜索条件:", form);
     // 可以对搜索条件进行预处理
-    return form
+    return form;
   },
   onSearchReset: (form) => {
-    console.log('重置搜索')
-    return form
-  }
-}
+    console.log("重置搜索");
+    return form;
+  },
+};
 ```
 
 ## 高级表格列
 
 ### 进度条显示
+
 ```javascript
 {
   label: '绩效评分',
   prop: 'performance',
   width: 120,
   cellRender: ({ row }) => (
-    <el-progress 
-      percentage={row.performance} 
+    <el-progress
+      percentage={row.performance}
       color={row.performance >= 90 ? '#67c23a' : '#e6a23c'}
       stroke-width={8}
       text-inside
@@ -251,6 +264,7 @@ const options = {
 ```
 
 ### 多标签显示
+
 ```javascript
 {
   label: '技能标签',
@@ -269,6 +283,7 @@ const options = {
 ```
 
 ### 条件操作
+
 ```javascript
 {
   type: 'operation',
@@ -289,4 +304,4 @@ const options = {
 }
 ```
 
-高级搜索功能让你可以构建复杂的查询界面，满足各种业务场景的搜索需求。
\ No newline at end of file
+高级搜索功能让你可以构建复杂的查询界面，满足各种业务场景的搜索需求。