diff --git a/examples/router/routes.js b/examples/router/routes.js
index bea3b2f..6aef0d3 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -136,7 +136,7 @@ const _develops = [
       {
         path: 'introduce',
         name: 'developSchemaIntroduce',
-        meta: { title: '介绍' },
+        meta: { title: 'Schema 介绍' },
         component: () => import('@/views/docs/develop/schema/introduce.md'),
       },
       {
diff --git a/examples/views/docs/component/schema-filter.md b/examples/views/docs/component/schema-filter.md
index 74005d3..6820450 100644
--- a/examples/views/docs/component/schema-filter.md
+++ b/examples/views/docs/component/schema-filter.md
@@ -1,158 +1,199 @@
 # Schema Filter 筛选
 
-根据JSON Schema配置自动生成一个筛选条件表单
+通过配置JSON Schema的方式快速生成一个筛选表单
 
 ## 基础用法
 
-配置`list`属性设置JSON Schema配置列表
+`schema`设置配置项，基本参数与`z-schema-form`相同；不同的是，由于本组件包含了展开状态，配置项的显示隐藏需要统一控制，因此本组件中不包含配置项的显隐逻辑。
 
-::: snippet 通过`list`配置项目
+::: snippet `schema`设置配置项，`loading`设置加载状态
 
 ```html
 <template>
-  <div>
-    <pre class="demo-model">{{ model }}</pre>
-    <z-schema-filter v-model="model" :list="list" @search="onSearch" @reset="onReset"></z-schema-filter>
-  </div>
+  <z-schema-filter v-model="form" :schema="schema" :loading="loading" @search="onSearch" @reset="onReset"></z-schema-filter>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      model: {},
-      list: [
-        { type: 'el-input', label: '姓名', key: 'name' },
-        { type: 'el-input', label: '年龄', key: 'age' },
-        { type: 'el-input', label: '省', key: 'province' },
-        { type: 'el-input', label: '市', key: 'city' },
-        { type: 'el-input', label: '区', key: 'area' },
-        { type: 'el-input', label: '地址', key: 'address' },
-      ]
-    }
+      form: {
+        name: '',
+        age: '',
+        gender: '',
+      },
+      schema: {
+        items: [
+          { is: 'el-input', prop: 'name', label: '姓名' },
+          { is: 'el-input', prop: 'age', label: '年龄' },
+          { is: 'el-input', prop: 'gender', label: '性别' },
+        ]
+      },
+      loading: false
+    };
   },
   methods: {
-    onSearch(params) {
-      console.log(JSON.parse(JSON.stringify(params)));
+    onSearch(model) {
+      this.loading = true;
+      console.log(model);
+      setTimeout(() => {
+        this.loading = false;
+      }, 1500);
     },
     onReset() {
       console.log('reset');
     }
   }
-}
+};
 </script>
 ```
 
 :::
 
-## 自定义按钮
-
-支持自定义按钮占位及按钮组件
-
-::: snippet 配置`uncollapsedSpan`改变展开时操作区占位，默认值`24`；插槽`operation`自定义按钮内容；
+::: snippet 默认显示数量为`3`，超过则会显示展开按钮
 
 ```html
 <template>
-  <z-schema-filter v-model="model" :list="list" :uncollapsedSpan="12">
-    <template #operation="{ size, handleSearch, handleReset, handleCollapse, showCollapsed, collapsed, loading }">
-      <div style="text-align: right;">
-        <el-button-group :size="size">
-          <el-button type="primary" round @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button>
-          <el-button @click="handleReset"><span>重置</span></el-button>
-          <el-button round v-if="showCollapsed" @click="handleCollapse">
-            <span>{{ collapsed ? '展开' : '收起' }}</span>
-          </el-button>
-        </el-button-group>
-      </div>
-    </template>
-  </z-schema-filter>
+  <z-schema-filter v-model="form" :schema="schema"></z-schema-filter>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      model: {},
-      list: [
-        { type: 'el-input', label: '姓名', key: 'name' },
-        { type: 'el-input', label: '年龄', key: 'age' },
-        { type: 'el-input', label: '省', key: 'province' },
-        { type: 'el-input', label: '市', key: 'city' },
-        { type: 'el-input', label: '区', key: 'area' },
-        { type: 'el-input', label: '地址', key: 'address' },
-      ]
-    }
+      form: {
+        name: '',
+        age: '',
+        gender: '',
+      },
+      schema: {
+        items: [
+          { is: 'el-input', prop: 'name', label: '姓名' },
+          { is: 'el-input', prop: 'age', label: '年龄' },
+          { is: 'el-input', prop: 'gender', label: '性别' },
+          { is: 'el-input', prop: 'address', label: '地址' },
+          { is: 'el-input', prop: 'package', label: '包裹' },
+        ]
+      },
+    };
   },
-}
+};
 </script>
 ```
 
 :::
 
-## 自定义数据项
+## 默认展示数量
 
-支持自定义数据项，一般用于通过JSON Schema较难配置出的，较复杂的局部组件
+常见的业务场景下，经常会出现多个筛选条件的情况，可以默认展示多行的搜索项。
 
-::: snippet 插槽名与数据项`key`相同
+::: snippet `display`设置默认展示的搜索项数量，控制按钮栏占位会根据每行剩余搜索项数量自动计算。
 
 ```html
 <template>
-  <z-schema-filter v-model="model" :list="list">
-    <template #name>
-      <el-input placeholder="请输入内容" v-model="model.name">
-        <el-button slot="append" icon="el-icon-search"></el-button>
-      </el-input>
-    </template>
-  </z-schema-filter>
+  <z-schema-filter v-model="form" :schema="schema" :display="7"></z-schema-filter>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      model: {},
-      list: [
-        { type: 'el-input', label: '姓名', key: 'name' },
-        { type: 'el-input', label: '年龄', key: 'age' },
-        { type: 'el-input', label: '省', key: 'province' },
-        { type: 'el-input', label: '市', key: 'city' },
-        { type: 'el-input', label: '区', key: 'area' },
-        { type: 'el-input', label: '地址', key: 'address' },
-      ]
-    }
+      form: {
+        name: '',
+        age: '',
+        gender: '',
+      },
+      schema: {
+        items: [
+          { is: 'el-input', prop: 'name', label: '姓名' },
+          { is: 'el-input', prop: 'age', label: '年龄' },
+          { is: 'el-input', prop: 'gender', label: '性别' },
+          { is: 'el-input', prop: 'item1', label: '搜索项1' },
+          { is: 'el-input', prop: 'item2', label: '搜索项2' },
+          { is: 'el-input', prop: 'item3', label: '搜索项3' },
+          { is: 'el-input', prop: 'item4', label: '搜索项4' },
+          { is: 'el-input', prop: 'item5', label: '搜索项5' },
+          { is: 'el-input', prop: 'item6', label: '搜索项6' },
+        ]
+      },
+      loading: false
+    };
   },
-}
+  methods: {
+    onSearch(model) {
+      this.loading = true;
+      console.log(model);
+      setTimeout(() => {
+        this.loading = false;
+      }, 1500);
+    },
+    onReset() {
+      console.log('reset');
+    }
+  }
+};
 </script>
 ```
 
 :::
 
-## 展示数量
+## 自定义操作栏
 
-默认展示数量为`3`个，可以通过配置而改变
+特殊业务场景下，可以自定义操作栏
 
-::: snippet 设置`visibleNum`改变默认展示数量的大小，`span`改变每一项的占位数量
+::: snippet `operation`插槽替换默认操作栏
 
 ```html
 <template>
-  <z-schema-filter :list="list" :visibleNum="2" :span="8" size="large"></z-schema-filter>
+  <z-schema-filter v-model="form" :schema="schema" :display="2" :loading="loading" @search="onSearch" @reset="onReset">
+    <template #operation="{ search, reset, collapse, collapsed, loading }">
+      <el-button-group round style="display: flex; justify-content: flex-end">
+        <el-button round type="primary" @click="search" :loading="loading" icon="el-icon-search">查询</el-button>
+        <el-button round @click="reset">重置</el-button>
+        <el-button round @click="onClick">自定义按钮</el-button>
+        <el-button round @click="collapse">{{ collapsed ? '收起' : '展开' }}</el-button>
+      </el-button-group>
+    </template>
+  </z-schema-filter>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      list: [
-        { type: 'el-input', label: '姓名', key: 'name' },
-        { type: 'el-input-number', label: '年龄', key: 'age', style: { width: '100%' }, props: { min: 0 } },
-        { type: 'el-input', label: '省', key: 'province' },
-        { type: 'el-input', label: '市', key: 'city' },
-        { type: 'el-input', label: '区', key: 'area' },
-        { type: 'el-input', label: '地址', key: 'address' },
-      ]
-    }
+      form: {
+        name: '',
+        age: '',
+        gender: '',
+      },
+      schema: {
+        items: [
+          { is: 'el-input', prop: 'name', label: '姓名' },
+          { is: 'el-input', prop: 'age', label: '年龄' },
+          { is: 'el-input', prop: 'gender', label: '性别' },
+          { is: 'el-input', prop: 'address', label: '地址' },
+          { is: 'el-input', prop: 'address', label: '地址' },
+        ]
+      },
+      loading: false,
+    };
   },
-}
+  methods: {
+    onSearch(model) {
+      this.loading = true;
+      console.log(model);
+      setTimeout(() => {
+        this.loading = false;
+      }, 1500);
+    },
+    onReset() {
+      console.log('reset');
+    },
+    onClick() {
+      console.log('click');
+    }
+  }
+};
 </script>
 ```
 
@@ -165,20 +206,18 @@ export default {
 参数|说明|类型|可选值|默认值
 -|-|-|-|-
 value | 值 | Object | - | {}
-list | JSON Schema配置项列表 | Array | - | []
-labelWidth | 默认Label宽度 | String | 110px
-size | 大小 | String | - | small
-span | 占位 | Number | - | 24
-uncollapsedSpan | 展开时操作区占位 | Number | - | 24
-visibleNum | 折叠时可视项数量 | Number | - | 3
-loading | 加载状态 | Boolean | - | -
-formProps | 默认el-form配置参数 | Object | - | {}
-params | 自定义附加参数 | Object | - | -
+schema | JSON Schema配置项列表 | Object | - | {}
+size | 大小 | String | - | -
+loading | 加载状态 | Boolean | - | false
+display | 默认收起时显示数量 | Number | - | 3
+span | 子项占位 | Number | - | 6
+collapsedSpan | 展开时操作栏占位，默认自动计算，特殊情况下可手动设置 | Boolean | - | -
+uncollapsedSpan | 收起时操作栏占位，默认自动计算，特殊情况下可手动设置 | Boolean | - | -
 
 ## Events 事件
 
 事件名称|说明|回调参数
 -|-|-
 input | 表单值变化 | model
-search | 查询 | model
-reset | 重置表单 | -
\ No newline at end of file
+search | 搜索 | model
+reset | 重置 | -
\ No newline at end of file
diff --git a/examples/views/docs/component/schema-form.md b/examples/views/docs/component/schema-form.md
index 8adb68f..e3bf80c 100644
--- a/examples/views/docs/component/schema-form.md
+++ b/examples/views/docs/component/schema-form.md
@@ -590,4 +590,19 @@ export default {
 </script>
 ```
 
-:::
\ No newline at end of file
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+value | 值 | Object | - | {}
+schema | JSON Schema配置项列表 | Object | - | {}
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+input | 表单值变化 | model
\ No newline at end of file
diff --git a/packages/form/index.vue b/packages/form/index.vue
index 5993003..1350f23 100644
--- a/packages/form/index.vue
+++ b/packages/form/index.vue
@@ -8,8 +8,11 @@
 </template>
 
 <script>
+import MIX_FORM from '../mixins/form';
+
 export default {
   name: 'Form',
+  mixins: [MIX_FORM],
   props: {
     value: Object,
     model: Object,
@@ -27,19 +30,5 @@ export default {
       zForm: this,
     };
   },
-  methods: {
-    validate(callback) {
-      return this.$refs.form.validate(callback);
-    },
-    validateField(props, callback) {
-      return this.$refs.form.validateField(props, callback);
-    },
-    resetFields() {
-      this.$refs.form.resetFields();
-    },
-    clearValidate(props) {
-      return this.$refs.form.clearValidate(props);
-    },
-  },
 };
 </script>
diff --git a/packages/mixins/form.js b/packages/mixins/form.js
new file mode 100644
index 0000000..9b280d0
--- /dev/null
+++ b/packages/mixins/form.js
@@ -0,0 +1,27 @@
+export default {
+  methods: {
+    validate(callback) {
+      if (this.$refs.form) {
+        return this.$refs.form.validate(callback);
+      }
+      return false;
+    },
+    validateField(props, callback) {
+      if (this.$refs.form) {
+        return this.$refs.form.validateField(props, callback);
+      }
+      return false;
+    },
+    resetFields() {
+      if (this.$refs.form) {
+        this.$refs.form.resetFields();
+      }
+    },
+    clearValidate(props) {
+      if (this.$refs.form) {
+        return this.$refs.form.clearValidate(props);
+      }
+      return false;
+    },
+  },
+};
diff --git a/packages/schema-filter/index.vue b/packages/schema-filter/index.vue
index fea9688..26c579f 100644
--- a/packages/schema-filter/index.vue
+++ b/packages/schema-filter/index.vue
@@ -1,74 +1,49 @@
 <template>
-  <z-schema-form
-    v-model="model"
-    class="z-schema-filter"
-    :list="formattedList"
-    :span="span"
-    :labelWidth="labelWidth"
-    :colClass="colVisibleRender"
-    :size="size"
-    :formProps="formProps"
-    :params="params"
-  >
+  <z-schema-form ref="form" class="z-schema-filter" v-model="model" :schema="formattedSchema">
     <template v-for="key in slotKeys">
-      <template v-if="key === 'operation'">
-        <slot :name="key" :slot="key" v-bind="{ size, handleSearch, handleReset, handleCollapse, showCollapsed, collapsed, loading }"></slot>
-      </template>
-      <slot v-else :name="key" :slot="key"></slot>
+      <slot :name="key" :slot="key" v-bind="slotProps"></slot>
     </template>
-    <div v-if="!slotKeys.includes('operation')" slot="operation" class="z-schema-filter__button-group">
-      <el-button-group :size="size">
-        <el-button type="primary" @click="handleSearch" :loading="loading" icon="el-icon-search"><span>查询</span></el-button>
-        <el-button @click="handleReset"><span>重置</span></el-button>
-        <el-button v-if="showCollapsed" @click="handleCollapse">
-          <span>{{ collapsed ? '展开' : '收起' }}</span>
-        </el-button>
-      </el-button-group>
-    </div>
+    <el-button-group v-if="!slotKeys.includes('operation')" slot="operation" style="display: flex; justify-content: flex-end">
+      <el-button type="primary" @click="onSearch" :loading="loading" icon="el-icon-search">查询</el-button>
+      <el-button @click="onReset">重置</el-button>
+      <el-button v-if="showCollapsed" @click="onCollapse">{{ collapsed ? '收起' : '展开' }}</el-button>
+    </el-button-group>
   </z-schema-form>
 </template>
 
 <script>
+import MIX_FORM from '../mixins/form';
+import { cloneDeep } from '../utils';
+
 export default {
   name: 'SchemaFilter',
+  mixins: [MIX_FORM],
   props: {
     value: Object,
-    list: Array,
-    labelWidth: {
-      type: String,
-      default: '110px',
-    },
-    size: {
-      type: String,
-      default: 'small',
+    schema: {
+      type: Object,
+      default() {
+        return {};
+      },
     },
-    span: {
+    size: String,
+    loading: Boolean,
+    display: {
       type: Number,
-      default: 6,
+      default: 3,
     },
-    collapsedSpan: {
+    span: {
       type: Number,
       default: 6,
     },
-    uncollapsedSpan: {
-      type: Number,
-      default: 24,
-    },
-    visibleNum: {
-      type: Number,
-      default: 3,
-    },
-    loading: Boolean,
-    formProps: {
-      type: Object,
-      default: () => ({}),
-    },
-    params: Object,
+    collapsedSpan: Number,
+    uncollapsedSpan: Number,
   },
   data() {
     return {
-      collapsed: true,
-      model: this.value || {},
+      collapsed: false,
+      model: this.value,
+      originData: {},
     };
   },
   watch: {
@@ -80,50 +55,93 @@ export default {
     },
   },
   computed: {
-    formattedList() {
-      return [...this.list, { key: 'operation', label: '', labelWidth: '0px', span: this.collapsed ? this.collapsedSpan : this.uncollapsedSpan }];
+    filterSize() {
+      return this.size || (this.$ELEMENT || {}).size;
+    },
+    formattedItems() {
+      const items = this.schema.items || [];
+      const result = [];
+      const visibleNumber = this.display - 1;
+      items.forEach((item, index) => {
+        if (!this.collapsed && index > visibleNumber && index < items.length) {
+          result.push({ ...item, if: true, show: false });
+        } else {
+          result.push({ ...item, if: true, show: true });
+        }
+      });
+      return result;
+    },
+    formattedSchema() {
+      return {
+        props: { span: this.span, 'label-width': '75px', size: this.filterSize || 'small', ...(this.schema.props || {}) },
+        items: [...this.formattedItems, { prop: 'operation', label: '', labelWidth: '0px', span: this.operationSpan }],
+      };
+    },
+    rowItemCount() {
+      return parseInt(24 / this.span);
+    },
+    rowItemRemain() {
+      return this.formattedItems.length % this.rowItemCount;
+    },
+    operationSpan() {
+      if (this.collapsed) {
+        if (this.collapsedSpan) {
+          return this.collapsedSpan;
+        }
+        return (this.rowItemCount - this.rowItemRemain) * this.span;
+      } else {
+        if (this.uncollapsedSpan) {
+          return this.uncollapsedSpan;
+        }
+        if (this.formattedItems.length < this.display) {
+          return this.span * (this.rowItemCount - this.rowItemRemain);
+        }
+        if (this.display < this.rowItemCount - 1) {
+          return this.span * this.display;
+        }
+        return this.span;
+      }
     },
     showCollapsed() {
-      const { list, visibleNum } = this;
-      return list.length > visibleNum;
+      return this.formattedItems.length > this.display;
     },
     slotKeys() {
       return Object.keys(this.$scopedSlots);
     },
+    slotProps() {
+      return {
+        size: this.size,
+        search: this.onSearch,
+        reset: this.onReset,
+        collapse: this.onCollapse,
+        collapsed: this.collapsed,
+        loading: this.loading,
+      };
+    },
+  },
+  created() {
+    const { originData, ...other } = this._data;
+    this.originData = cloneDeep(other);
   },
   methods: {
-    // 渲染列表项class
-    colVisibleRender(item, index) {
-      if (this.collapsed) {
-        const visibleNumber = this.visibleNum ? this.visibleNum - 1 : 2;
-        return index > visibleNumber && index < this.list.length ? 'z-schema-filter__item hidden' : 'z-schema-filter__item';
-      }
-      return 'z-schema-filter__item';
-    },
     // 搜索
-    handleSearch() {
-      this.$emit('search', this.model);
+    onSearch() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.$emit('search', this.model);
+        }
+      });
     },
     // 重置
-    handleReset() {
-      this.model = {};
+    onReset() {
+      this.model = cloneDeep(this.originData).model;
+      this.$refs.form.resetFields();
       this.$emit('reset');
     },
     // 折叠
-    handleCollapse() {
+    onCollapse() {
       this.collapsed = !this.collapsed;
     },
   },
 };
 </script>
-
-<style>
-.z-schema-filter__item.hidden {
-  display: none;
-}
-.z-schema-filter__button-group {
-  width: 100%;
-  box-sizing: border-box;
-  text-align: right;
-}
-</style>
diff --git a/packages/schema-form/index copy.vue b/packages/schema-form/index copy.vue
deleted file mode 100644
index bb9fc6f..0000000
--- a/packages/schema-form/index copy.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<style lang="scss">
-.z-schema-form {
-  &__flex-wrap {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-  }
-  &__group-title {
-    font-weight: bold;
-    padding: 15px 5px;
-    border-bottom: 1px solid #d9d9d9;
-    margin-bottom: 15px;
-  }
-  &__group-content {
-    margin: 15px 0px;
-  }
-  &__footer {
-    padding-top: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-</style>
-
-<template>
-  <el-form
-    ref="form"
-    class="z-schema-form"
-    :size="size"
-    :class="formClass"
-    :model="formModel"
-    :label-width="labelWidth"
-    :label-position="labelPosition || labelWidth ? 'right' : 'top'"
-    v-bind="formProps"
-  >
-    <schema-form-render
-      :title-class="titleClass"
-      :content-class="contentClass"
-      :item-class="itemClass"
-      :col-class="colClass"
-      :group-class="groupClass"
-      :list="formList"
-      :value="model"
-      :model="model"
-      :span="span"
-      :type="type"
-      :params="params"
-      @item-change="onItemChange"
-      @form-item-change="onFormItemChange"
-      @item-update="onItemUpdate"
-    >
-      <slot v-for="key in slotKeys" :name="key" :slot="key"></slot>
-    </schema-form-render>
-    <div v-if="$scopedSlots.footer" class="z-schema-form__footer">
-      <slot name="footer" :size="size" :validate="validate" :reset="reset" :model="model"></slot>
-    </div>
-  </el-form>
-</template>
-
-<script>
-import SchemaFormRender from './schema-form-render';
-import { cloneDeep, set } from '../utils';
-
-export default {
-  name: 'SchemaForm',
-  components: { SchemaFormRender },
-  props: {
-    value: Object,
-    list: Array,
-    formClass: String,
-    titleClass: String,
-    contentClass: String,
-    itemClass: String,
-    colClass: [String, Function],
-    groupClass: String,
-    labelWidth: String,
-    labelPosition: String,
-    type: String,
-    size: {
-      type: String,
-      default: 'small',
-    },
-    span: {
-      type: Number,
-      default: 24,
-    },
-    formProps: {
-      type: Object,
-      default: () => ({}),
-    },
-    params: Object,
-  },
-  data() {
-    return {
-      model: {},
-      formModel: {},
-      formList: [],
-    };
-  },
-  computed: {
-    slotKeys() {
-      return Object.keys(this.$scopedSlots);
-    },
-  },
-  watch: {
-    value: {
-      handler(val = {}) {
-        this.model = val;
-        this.setFormModel(val);
-      },
-      immediate: true,
-    },
-    list: {
-      handler(val) {
-        // 深度克隆传入的列表，避免原始值被修改
-        const newList = cloneDeep(this.list);
-        // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
-        const generateFullKey = (list, parentKey) => {
-          list.forEach(item => {
-            if (item.group && item.list) {
-              if (item.group.key) {
-                item.fullKey = `${parentKey ? `${parentKey}-${item.group.key}` : item.group.key}`;
-              } else {
-                item.fullKey = parentKey || item.key;
-              }
-              generateFullKey(item.list, item.fullKey);
-            } else {
-              item.fullKey = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
-            }
-          });
-        };
-        generateFullKey(newList);
-        this.formList = newList;
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    handleInput(value) {
-      console.log(value);
-    },
-    /**
-     * @description 表单项值变化
-     * @param {Object} item 表单项值对象
-     */
-    onItemChange(item) {
-      this.$emit('input', { ...this.model, ...item });
-    },
-    /**
-     * @description 表单相校验值变化
-     * @param {Object} item 表单项校验值对象
-     */
-    onFormItemChange(item) {
-      this.formModel = { ...this.formModel, ...item };
-    },
-    /**
-     * @description 校验表单
-     */
-    validate(cb) {
-      return new Promise(resolve => {
-        this.$refs.form.validate(valid => {
-          cb && cb(valid);
-          this.$emit('validate', valid, this.model);
-          return resolve(valid);
-        });
-      });
-    },
-    /**
-     * @description 重置表单
-     */
-    reset() {
-      this.$refs.form.clearValidate();
-      this.$emit('reset');
-    },
-    /**
-     * @description 根据表单值设置表单校验值
-     * @param {Object} value 表单值
-     */
-    setFormModel(value) {
-      let formModel = {};
-      // 递归深度解析表单值，将表单值扁平化为一层的对象并设置为表单校验值对象
-      const setFormModelValue = (list, parentKey) => {
-        list.forEach(item => {
-          item.fullKey = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
-          if (item.value instanceof Object) {
-            setFormModelValue(
-              Object.keys(item.value).map(key => ({ key, value: item.value[key] })),
-              item.fullKey,
-            );
-          } else {
-            formModel[item.fullKey] = item.value;
-          }
-        });
-      };
-      setFormModelValue(Object.keys(value).map(key => ({ key, value: value[key] })));
-      this.formModel = formModel;
-    },
-    /**
-     * @description 手动更新某一表单项的值
-     * @param {Object} param 需要更新的参数对象或者对象数组 { name => 表单项key,可嵌套; value => 更新的值 }
-     * @example { name: 'a.b.c', value: 123 }
-     * @example { name: 'd.0.e', value: ['f'] }
-     */
-    onItemUpdate(param) {
-      this.$nextTick(() => {
-        const newModel = cloneDeep(this.model);
-        Object.entries(param).forEach(entry => {
-          set(newModel, entry[0], entry[1]);
-        });
-        this.$emit('input', newModel);
-      });
-    },
-  },
-};
-</script>
diff --git a/packages/schema-form/index.vue b/packages/schema-form/index.vue
index 16e2f7e..7bcd483 100644
--- a/packages/schema-form/index.vue
+++ b/packages/schema-form/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <z-form ref="form" v-model="model" v-bind="schema.props" v-on="schema.props">
+  <z-form ref="form" class="z-schema-form" v-model="model" v-bind="schema.props" v-on="schema.on">
     <template v-for="(item, index) in schema.items">
       <template v-if="item.is">
-        <z-form-item v-if="bindParam(item, 'if', true)" v-show="bindParam(item, 'show', true)" v-bind="bindItemProps(item)" :key="index">
+        <z-form-item v-if="bindParam(item, 'if')" v-show="bindParam(item, 'show')" v-bind="bindItemProps(item)" :key="index">
           <slot v-if="$scopedSlots[item.prop]" :name="item.prop" :value="get(model, item.prop)" :onInput="value => onComponentInput({ value, item })" v-bind="slotProps"> </slot>
           <item-render v-else :item="item" :value="get(model, item.prop)" :onInput="value => onComponentInput({ value, item })"></item-render>
           <slot :name="`label-${item.prop}`" slot="label" v-bind="slotProps"></slot>
@@ -10,7 +10,7 @@
         </z-form-item>
       </template>
       <template v-else>
-        <z-form-item v-if="bindParam(item, 'if', true)" v-show="bindParam(item, 'show', true)" v-bind="bindItemProps(item)" :key="index" :value="get(model, item.prop)">
+        <z-form-item v-if="bindParam(item, 'if')" v-show="bindParam(item, 'show')" v-bind="bindItemProps(item)" :key="index" :value="get(model, item.prop)">
           <slot :name="item.prop" :value="get(model, item.prop)" :onInput="value => onComponentInput({ value, item })" v-bind="slotProps"></slot>
         </z-form-item>
       </template>
@@ -20,10 +20,12 @@
 </template>
 
 <script>
+import MIX_FORM from '../mixins/form';
 import { cloneDeep, get, set } from '../utils';
 
 export default {
   name: 'SchemaForm',
+  mixins: [MIX_FORM],
   components: {
     ItemRender: {
       functional: true,
@@ -102,11 +104,16 @@ export default {
   },
   methods: {
     get,
-    bindParam(item, key, def) {
+    bindParam(item, key) {
       if (typeof item[key] === 'function') {
         return item[key]({ model: this.model });
       }
-      return def || item[key];
+      if (['if', 'show'].includes(key)) {
+        if (['', null, undefined].includes(item[key])) {
+          return true;
+        }
+      }
+      return item[key];
     },
     bindItemProps(item) {
       const { children, is, props, on, ...other } = item || {};
@@ -115,18 +122,6 @@ export default {
         return result;
       }, {});
     },
-    validate(callback) {
-      return this.$refs.form.validate(callback);
-    },
-    validateField(props, callback) {
-      return this.$refs.form.validateField(props, callback);
-    },
-    resetFields() {
-      this.$refs.form.resetFields();
-    },
-    clearValidate(props) {
-      return this.$refs.form.clearValidate(props);
-    },
     onComponentInput({ value, item }) {
       set(this.model, item.prop, value);
     },
diff --git a/packages/schema-form/schema-form-render.vue b/packages/schema-form/schema-form-render.vue
deleted file mode 100644
index a4b89ea..0000000
--- a/packages/schema-form/schema-form-render.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<template>
-  <!-- 在row上使用flex，防止表单组件大小不一导致错位 -->
-  <component :is="rowComponent" class="z-schema-form__flex-wrap">
-    <template v-for="(item, index) in list">
-      <!-- 表单项有设置分组时 -->
-      <component
-        :is="colComponent"
-        v-if="item.group && item.list"
-        :key="index"
-        :span="type === 'div' ? undefined : item.group.span || 24"
-        :style="{ width: type === 'div' ? '100%' : undefined }"
-        :class="colClassRender(item, index, colClass)"
-      >
-        <component :is="rowComponent" class="z-schema-form__flex-wrap" :class="groupClass || 'z-schema-form__group'">
-          <!-- 表单分组标题 -->
-          <component :is="rowComponent" :class="titleClass || 'z-schema-form__group-title'" v-if="item.group.title" style="width: 100%;">
-            {{ item.group.title || item.group }}
-          </component>
-          <!-- 递归本组件 -->
-          <schema-form-render
-            :title-class="titleClass"
-            :item-class="itemClass"
-            :content-class="contentClass"
-            :group-class="groupClass"
-            :class="contentClass || 'z-schema-form__group-content'"
-            :list="item.list"
-            :value="value"
-            :model="itemKey ? model[itemKey] || {} : model"
-            :itemKey="item.group.key"
-            :type="type"
-            @item-change="onItemChange"
-            @form-item-change="onFormItemChange"
-            @item-update="onItemUpdate"
-            :span="type === 'div' ? undefined : span * (24 / (item.group.span || 24))"
-          ></schema-form-render>
-        </component>
-      </component>
-      <!-- 正常无分组表单项 -->
-      <template v-else>
-        <component
-          :is="colComponent"
-          v-if="bindItemVisible(item, 'visible')"
-          v-show="bindItemVisible(item, 'show')"
-          :span="type === 'div' ? undefined : item.span || span"
-          :key="index"
-          :style="{ width: type === 'div' && item.style && item.style.width.includes('%') ? item.style.width : undefined, paddingRight: '10px' }"
-          :class="colClassRender(item, index, colClass)"
-        >
-          <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item | bindItemRulesFilter(model)" :class="itemClass || 'z-schema-form__item'">
-            <slot v-if="$scopedSlots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model1="value"></slot>
-            <template v-else>
-              <!-- 自定义组件 -->
-              <dynamic-render
-                v-if="typeof item.type === 'function'"
-                :render="
-                  item.type($createElement, {
-                    model: value,
-                    config: {
-                      props: { ...propsFormatter(item.props), value: itemValue(item) },
-                      style: item.style || { width: '100%' },
-                      on: {
-                        ...bindItemEvent(item),
-                        input: v => onInput({ value: v, item }),
-                      },
-                    },
-                  })
-                "
-              ></dynamic-render>
-              <component
-                v-else
-                :is="item.type"
-                :value="itemValue(item)"
-                @input="v => onInput({ value: v, item })"
-                v-on="bindItemEvent(item)"
-                v-bind="propsFormatter(item.props)"
-                :style="item.style || { width: '100%' }"
-              ></component>
-            </template>
-          </el-form-item>
-        </component>
-      </template>
-    </template>
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'SchemaFormRender',
-  components: {
-    DynamicRender: {
-      functional: true,
-      render(h, context) {
-        return context.props.render;
-      },
-    },
-  },
-  props: {
-    list: Array,
-    model: Object,
-    value: Object,
-    itemKey: String,
-    titleClass: String,
-    contentClass: String,
-    itemClass: String,
-    colClass: [String, Function],
-    groupClass: String,
-    type: String,
-    span: Number,
-    params: Object,
-  },
-  computed: {
-    rowComponent() {
-      return this.type === 'div' ? 'div' : 'el-row';
-    },
-    colComponent() {
-      return this.type === 'div' ? 'div' : 'el-col';
-    },
-  },
-  filters: {
-    /**
-     * @description 绑定表单项规则
-     * @param {Object} item 表单项配置
-     * @returns {Function} 事件函数
-     */
-    bindItemRulesFilter(item = {}, model) {
-      if (item.rules) {
-        if (typeof item.rules === 'function') {
-          return item.rules(model);
-        } else {
-          return item.rules;
-        }
-      } else {
-        return undefined;
-      }
-    },
-  },
-  methods: {
-    /**
-     * @description 渲染col class
-     * @param {Object} item 表单项配置
-     * @param {Object} index 表单项渲染下标
-     * @param {Object} colClass 表单项配置
-     * @return {String} col class
-     */
-    colClassRender(item, index, colClass) {
-      if (colClass instanceof Function) {
-        return colClass(item, index);
-      } else {
-        return colClass;
-      }
-    },
-    /**
-     * @description 根据表单项的key查询该值
-     * @param {Object} item 表单项配置
-     * @returns {Any} 返回值
-     */
-    itemValue(item) {
-      if (this.itemKey) {
-        // 如果存在itemKey，即当前项位于嵌套分组内，查询分组名下对应key的值
-        const groupItem = this.model[this.itemKey] || {};
-        return groupItem[item.key];
-      } else {
-        // 否则即意味着不在分组内，直接查询model下对应key的值
-        return this.model[item.key];
-      }
-    },
-    /**
-     * @description 组件有值输入时的事件
-     * @param {Object} data { value => 组件值; item => 表单项配置 }
-     */
-    onInput({ value, item }) {
-      if (this.itemKey) {
-        this.$emit('item-change', { [this.itemKey]: { ...this.model[this.itemKey], [item.key]: value } });
-      } else {
-        this.$emit('item-change', { [item.key]: value });
-      }
-      this.$emit('form-item-change', { [item.fullKey]: value });
-    },
-    /**
-     * @description 当表单项有改动时的事件
-     * @param {Any} 表单项值
-     */
-    onItemChange(value) {
-      if (this.itemKey) {
-        this.$emit('item-change', { [this.itemKey]: { ...this.model[this.itemKey], ...value } });
-      } else {
-        this.$emit('item-change', value);
-      }
-    },
-    /**
-     * @description 当表单项校验值有改动时的事件
-     * @param {Any} 表单项校验值
-     */
-    onFormItemChange(value) {
-      this.$emit('form-item-change', value);
-    },
-    /**
-     * @description 当表单项有手动更新时的事件
-     * @param {Any} 表单项值
-     */
-    onItemUpdate(value) {
-      this.$emit('item-update', value);
-    },
-    /**
-     * @description 绑定表单项事件
-     * @param {Object} item 表单项配置
-     * @returns {Function} 事件函数
-     */
-    bindItemEvent(item) {
-      if (item.on) {
-        if (typeof item.on === 'function') {
-          return item.on({ model: this.value, update: e => this.$emit('item-update', e) });
-        } else {
-          return item.on;
-        }
-      } else {
-        return undefined;
-      }
-    },
-    /**
-     * @description 绑定表单项显示状态
-     * @param {Object} item 表单项配置
-     * @param {String} type Vue显示类型，可选值：visible、show
-     * @returns {Boolean} 显示状态
-     */
-    bindItemVisible(item, type) {
-      const visible = item[type];
-      if (typeof visible === 'function') {
-        return visible(this.model, this.params || {});
-      }
-      return item[type] !== false;
-    },
-    /**
-     * @description 格式化props属性
-     * @param {Object|Function} props 属性或属性对象
-     * @returns {Object} 格式化的属性
-     */
-    propsFormatter(props) {
-      if (typeof props === 'function') {
-        return props(this.model, this.params || {});
-      }
-      return props || {};
-    },
-  },
-};
-</script>
--
libgit2 0.21.0