diff --git a/examples/router/routes.js b/examples/router/routes.js
index 6aef0d3..1e70614 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -1,6 +1,7 @@
 import DefaultLayout from '@/views/layout/default';
 import ComponentLayout from '@/views/layout/component';
 import DevelopLayout from '@/views/layout/develop';
+import DesignLayout from '@/views/layout/design';
 
 // 开发指南的文档
 
@@ -89,10 +90,10 @@ const _components = [
         component: () => import('@/views/docs/component/schema-table.md'),
       },
       {
-        path: 'schema',
-        name: 'schema',
-        meta: { title: 'Schema 方案' },
-        component: () => import('@/views/docs/component/schema.md'),
+        path: 'schema-page',
+        name: 'schema-page',
+        meta: { title: 'Schema Page 页面' },
+        component: () => import('@/views/docs/component/schema-page.md'),
       },
     ],
   },
@@ -139,24 +140,6 @@ const _develops = [
         meta: { title: 'Schema 介绍' },
         component: () => import('@/views/docs/develop/schema/introduce.md'),
       },
-      {
-        path: 'schema-form',
-        name: 'developSchemaForm',
-        meta: { title: 'Schema Form 方案表单' },
-        component: () => import('@/views/docs/develop/schema/schema-form.md'),
-      },
-      {
-        path: 'schema-table',
-        name: 'developSchemaTable',
-        meta: { title: 'Schema Table 方案表格' },
-        component: () => import('@/views/docs/develop/schema/schema-table.md'),
-      },
-      {
-        path: 'schema-page',
-        name: 'developSchemaPage',
-        meta: { title: 'Schema Page 方案页面' },
-        component: () => import('@/views/docs/develop/schema/schema-page.md'),
-      },
     ],
   },
 ];
@@ -166,6 +149,25 @@ _develops.forEach(data => {
   _develops_children = [..._develops_children, ...data.children];
 });
 
+const _designs = [
+  {
+    group: '表格',
+    children: [
+      {
+        path: 'table',
+        name: 'designTable',
+        meta: { title: '表格设计规范' },
+        component: () => import('@/views/docs/design/table.md'),
+      },
+    ],
+  },
+];
+
+let _designs_children = [];
+_designs.forEach(data => {
+  _designs_children = [..._designs_children, ...data.children];
+});
+
 // 用于导航的页面
 const _pages = [
   {
@@ -190,6 +192,14 @@ const _pages = [
     children: [..._components_children, ..._guides, ..._others],
   },
   {
+    path: '/design',
+    name: 'design',
+    meta: { title: '设计', path: '/design' },
+    component: DesignLayout,
+    redirect: `/design/${_designs[0].children[0].path}`,
+    children: [..._designs_children],
+  },
+  {
     path: '/develop',
     name: 'develop',
     meta: { title: '开发', path: '/develop' },
@@ -204,6 +214,7 @@ export const guides = _guides;
 export const components = _components;
 export const others = _others;
 export const develops = _develops;
+export const designs = _designs;
 
 export default [
   { path: '*', redirect: '/404', hidden: true },
diff --git a/examples/views/docs/component/schema-page.md b/examples/views/docs/component/schema-page.md
new file mode 100644
index 0000000..1e6cea5
--- /dev/null
+++ b/examples/views/docs/component/schema-page.md
@@ -0,0 +1,573 @@
+# Schema Page 方案页面
+
+根据JSON Schema配置自动生成一个包含搜索、表格、表单、详情功能的页面
+
+## 基础用法
+
+`schema`设置配置项，其中包括`filter`、`table`、`form`三个基本schema配置，配置方式分别对应`z-schema-filter`、`z-schema-table`、`z-schema-form`，绑定值则分别对应`value-filter`、`value-table`、`value-form`，由于是多个双向绑定的值，所以使用`sync`修饰符来做双向绑定。
+
+::: snippet 基础示例
+
+```html
+<template>
+  <z-schema-page :schema="schema" :value-filter.sync="filterModel" :value-table.sync="tableModel" :value-form.sync="formModel"></z-schema-page>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        filter: {
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名' },
+          ]
+        },
+        table: {
+          props: { size: 'mini', border: true } ,
+          items: [
+            { prop: 'name', label: '姓名' },
+            { prop: 'age', label: '年龄' },
+            { prop: 'address', label: '地址' },
+            { prop: 'status', label: '状态' },
+          ]
+        },
+        form: {
+          props: { labelWidth: '70px', size: 'small', span: 12 },
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+            { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
+            { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
+          ]
+        },
+      },
+      filterModel: { name: '', age: '', gender: '', address: '' },
+      formModel: { name: '', age: '', address: '' },
+      tableModel: [
+        { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+        { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+        { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+        { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+        { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+      ],
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## 详情入口
+
+可以通过自定义插槽的方式，在单元格内指定详情入口。由于三个子组件均支持自定义插槽，所以在本组件中使用自定义插槽时需要加上子组件**前缀**。
+
+::: snippet 配置表格中的详情入口可以使用`table-cell-`插槽。
+
+```html
+<template>
+  <z-schema-page :schema="schema" :value-filter.sync="filterModel" :value-table.sync="tableModel" :value-form.sync="formModel">
+    <template #table-cell-name="{ value, row, openDetail }">
+      <el-link type="primary" @click="openDetail(row)">{{ value }}</el-link>
+    </template>
+  </z-schema-page>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        filter: {
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名' },
+          ]
+        },
+        table: {
+          props: { size: 'mini', border: true } ,
+          items: [
+            { prop: 'name', label: '姓名' },
+            { prop: 'age', label: '年龄' },
+            { prop: 'address', label: '地址' },
+            { prop: 'status', label: '状态' },
+          ]
+        },
+        form: {
+          props: { labelWidth: '70px', size: 'small', span: 12 },
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+            { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
+            { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
+          ]
+        },
+      },
+      filterModel: { name: '', age: '', gender: '', address: '' },
+      formModel: { name: '', age: '', address: '' },
+      tableModel: [
+        { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+        { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+        { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+        { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+        { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+      ],
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## 对接接口
+
+本组件预置了增删改查逻辑，因此分别对应`api-search`、`api-new`、`api-edit`、`api-get`、`api-delete`五个基本接口。
+
+::: snippet 接口格式为返回一个**Promise**对象的**Function**。其中，`api-search`的执行结果必须是{ list: [...], total: n }的格式，`api-get`的执行结果必须与`valur-form`相对应，`api-new`、`api-edit`、`api-delete`保持默认的**Promise**的resolve或reject逻辑即可，详情见示例。
+
+```html
+<template>
+  <z-schema-page
+    :schema="schema"
+    :value-filter.sync="filterModel"
+    :value-form.sync="formModel"
+    :api-search="searchAPI"
+    :api-get="getAPI"
+    :api-delete="deleteAPI"
+    :api-new="newAPI"
+    :api-edit="editAPI"
+  >
+    <template #table-cell-name="{ value, row, openDetail }">
+      <el-link type="primary" @click="openDetail(row)">{{ value }}</el-link>
+    </template>
+  </z-schema-page>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        auto: true,
+        filter: {
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名' },
+          ]
+        },
+        table: {
+          props: { size: 'mini', border: true } ,
+          items: [
+            { prop: 'name', label: '姓名' },
+            { prop: 'age', label: '年龄' },
+            { prop: 'address', label: '地址' },
+            { prop: 'status', label: '状态' },
+          ]
+        },
+        form: {
+          props: { labelWidth: '70px', size: 'small', span: 12 },
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+            { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
+            { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
+          ]
+        },
+      },
+      filterModel: { name: '', age: '', gender: '', address: '' },
+      formModel: { name: '', age: '', address: '' },
+    }
+  },
+  methods: {
+    searchAPI(params) {
+      console.log('search', params);
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const list = [
+            { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+            { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+            { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+            { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+            { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+          ]
+          resolve({
+            list,
+            total: list.length
+          });
+        }, 500);
+      });
+    },
+    getAPI(row) {
+      console.log('get', row);
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve({ ...row, name: `[${row.name}]` });
+        }, 1500);
+      });
+    },
+    newAPI(model) {
+      console.log('new', model);
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve();
+        }, 1500);
+      });
+    },
+    editAPI(model) {
+      console.log('edit', model);
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          reject();
+        }, 1500);
+      });
+    },
+    deleteAPI(selection) {
+      console.log('delete', selection);
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve();
+        }, 1500);
+      });
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 详情接口
+
+由于可能出现详情与表单不同的情况，因此本组件提供了`value-detail`属性和`api-detail`接口可独立维护详情页面，若详情表单项也不同，则可以在`schema`中配置`detail`来设置。
+
+::: snippet 若没有详情绑定值属性和接口，则默认以表单的值为准。
+
+```html
+<template>
+  <z-schema-page
+    :schema="schema"
+    :value-filter.sync="filterModel"
+    :value-form.sync="formModel"
+    :value-detail.sync="detailModel"
+    :api-search="searchAPI"
+    :api-get="getAPI"
+    :api-detail="detailAPI"
+    :api-delete="deleteAPI"
+    :api-new="newAPI"
+    :api-edit="editAPI"
+  >
+    <template #table-cell-name="{ value, row, openDetail }">
+      <el-link type="primary" @click="openDetail(row)">{{ value }}</el-link>
+    </template>
+    <template #detail-packages="{ value }">
+      <el-tag v-for="item in value" size="mini" type="info" style="margin-right: 10px">{{ item }}</el-tag>
+    </template>
+  </z-schema-page>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        auto: true,
+        filter: {
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名' },
+          ]
+        },
+        table: {
+          props: { size: 'mini', border: true } ,
+          items: [
+            { prop: 'name', label: '姓名' },
+            { prop: 'age', label: '年龄' },
+            { prop: 'address', label: '地址' },
+            { prop: 'status', label: '状态' },
+          ]
+        },
+        form: {
+          props: { labelWidth: '70px', size: 'small', span: 12 },
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+            { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
+            { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
+          ]
+        },
+        detail: {
+          props: { labelWidth: '70px', size: 'small', span: 12 },
+          items: [
+            { prop: 'name', label: '姓名' },
+            { prop: 'age', label: '年龄' },
+            { props: { type: 'textarea' }, prop: 'address', label: '住址' },
+            { prop: 'packages', label: '包裹', span: 24 }
+          ]
+        }
+      },
+      filterModel: { name: '', age: '', gender: '', address: '' },
+      formModel: { name: '', age: '', address: '' },
+      detailModel: { name: '', age: '', address: '', packages: [] },
+    }
+  },
+  methods: {
+    searchAPI(params) {
+      console.log('search', params);
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const list = [
+            { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+            { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+            { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+            { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+            { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+          ]
+          resolve({
+            list,
+            total: list.length
+          });
+        }, 500);
+      });
+    },
+    getAPI(row) {
+      console.log('get', row);
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve({ ...row, name: `[${row.name}]` });
+        }, 1500);
+      });
+    },
+    detailAPI(row) {
+      console.log('detail', row);
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve({ ...row, packages: ['手机', '电脑'], address: '上海市青浦区华新镇纪鹤公路1988号' });
+        }, 1500);
+      });
+    },
+    newAPI(model) {
+      console.log('new', model);
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve();
+        }, 1500);
+      });
+    },
+    editAPI(model) {
+      console.log('edit', model);
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          reject();
+        }, 1500);
+      });
+    },
+    deleteAPI(selection) {
+      console.log('delete', selection);
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve();
+        }, 1500);
+      });
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 弹窗类型
+
+除了本组件内置的`new`、`edit`、`detail`三种弹出框模式之外，还可以通过任意插槽打开任意自定义弹出框。也支持重新定义原有的三种弹框，同时也需要重新自定义表单校验和提交等逻辑。
+
+::: snippet 插槽提供`openDialog`打开弹出框方法，参数类型为(type: 弹出框类型, title: 弹出框标题, config: 弹出框配置)，弹出框主体通过`dialog-`插槽定义。`closeDialog`为关闭弹出框。
+
+```html
+<template>
+  <z-schema-page :schema="schema" :value-table.sync="tableModel">
+    <template #action-button="{ size, openDialog }">
+      <el-button :size="size" @click="openDialog('bill', '账单', { width: '70%' })">账单</el-button>
+    </template>
+    <template #operation-button="{ openDialog, row }">
+      <el-button type="text" @click="openDialog('load', `配置-${row.name}`, { width: '400px' })">配载</el-button>
+    </template>
+    <template #table-cell-name="{ value, row, openDetail }">
+      <el-link type="primary" @click="openDetail(row)">{{ value }}</el-link>
+    </template>
+    <template #dialog-bill="{ closeDialog }">
+      <z-schema-table v-model="billData" :schema="billSchema"></z-schema-table>
+      <div style="text-align: center; margin-top: 20px">
+        <el-button plain @click="closeDialog">关闭</el-button>
+      </div>
+    </template>
+    <template #dialog-load="{ closeDialog }">
+      <el-alert title="这里是一段自定义信息" type="error" show-icon style="margin-bottom: 20px"></el-alert>
+      <z-schema-form v-model="loadModel" :schema="loadSchema"></z-schema-form>
+      <el-button type="primary" @click="closeDialog">关闭弹出框</el-button>
+    </template>
+    <template #dialog-new="{ closeDialog }">
+      <el-alert title="这里是自定义新增弹窗" type="success" show-icon style="margin-bottom: 20px"></el-alert>
+      <el-button plain @click="closeDialog">关闭</el-button>
+    </template>
+    <template #dialog-edit="{ closeDialog }">
+      <el-alert title="这里是自定义编辑弹窗" type="warning" show-icon style="margin-bottom: 20px"></el-alert>
+      <el-button plain @click="closeDialog">关闭</el-button>
+    </template>
+    <template #dialog-detail="{ closeDialog }">
+      <el-alert title="这里是自定义详情弹窗" type="info" show-icon style="margin-bottom: 20px"></el-alert>
+      <el-button plain @click="closeDialog">关闭</el-button>
+    </template>
+  </z-schema-page>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        filter: {
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名' },
+          ]
+        },
+        table: {
+          props: { size: 'mini', border: true } ,
+          items: [
+            { prop: 'name', label: '姓名' },
+            { prop: 'age', label: '年龄' },
+            { prop: 'address', label: '地址' },
+            { prop: 'status', label: '状态' },
+          ]
+        },
+        form: {
+          props: { labelWidth: '70px', size: 'small', span: 12 },
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+            { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
+            { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
+          ]
+        },
+        operation: { width: 120 }
+      },
+      tableModel: [
+        { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+        { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+        { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+        { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+        { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+      ],
+      loadModel: {
+        name: '',
+        count: 1,
+        packages: []
+      },
+      loadSchema: {
+        props: { 'label-width': '70px', size: 'small' },
+        items: [
+          { is: 'el-input', prop: 'name', label: '名称' },
+          { is: 'el-input-number', prop: 'count', label: '数量' },
+          {
+            is: 'el-checkbox-group',
+            prop: 'packages',
+            label: '包裹',
+            children: [
+              { is: 'el-checkbox', props: { label: '零食' } },
+              { is: 'el-checkbox', props: { label: '手机' } },
+              { is: 'el-checkbox', props: { label: '电脑' } },
+            ],
+          },
+        ]
+      },
+      billData: [
+        { billno: 'B20210401000001', amount: '18750' },
+        { billno: 'B20210401000002', amount: '637' },
+      ],
+      billSchema: {
+        items: [
+          { label: '单号', prop: 'billno' },
+          { label: '金额', prop: 'amount' },
+        ]
+      }
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## 按钮权限
+
+本组件不包含自定义业务逻辑，因此配置项不包含权限判断，如果需要按钮的权限判断，可以通过`action`插槽和`operation`插槽将渲染逻辑暴露在视图模板中，然后进行自定义判断。
+
+::: snippet 本示例项目中没有`v-permission`等自定义权限指令，使用时根据实际情况在对应的按钮加上判断即可
+
+```html
+<template>
+  <z-schema-page :schema="schema" :value-filter.sync="filterModel" :value-table.sync="tableModel" :value-form.sync="formModel">
+    <template #action="{ size, selection, openNew, onDeleteMultiple }">
+      <el-button :size="size" type="primary" @click="openNew">新增</el-button>
+      <el-button :size="size" plain :disabled="selection.length === 0" @click="onDeleteMultiple(selection)">删除</el-button>
+    </template>
+    <template #operation="{ openEdit, onDelete }">
+      <el-table-column label="操作" width="90" align="center">
+        <template #default="{ row, column, $index }">
+          <div class="z-schema-page__table-operation">
+            <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(row)"></el-button>
+            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" title="确定删除吗？" placement="top" @confirm="onDelete([row])">
+              <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
+            </el-popconfirm>
+          </div>
+        </template>
+      </el-table-column>
+    </template>
+  </z-schema-page>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      schema: {
+        filter: {
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名' },
+          ]
+        },
+        table: {
+          props: { size: 'mini', border: true } ,
+          items: [
+            { prop: 'name', label: '姓名' },
+            { prop: 'age', label: '年龄' },
+            { prop: 'address', label: '地址' },
+            { prop: 'status', label: '状态' },
+          ]
+        },
+        form: {
+          props: { labelWidth: '70px', size: 'small', span: 12 },
+          items: [
+            { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
+            { is: 'el-input-number', prop: 'age', label: '年龄', rules: [{ required: true, message: '请输入有效年龄' }] },
+            { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
+          ]
+        },
+      },
+      filterModel: { name: '', age: '', gender: '', address: '' },
+      formModel: { name: '', age: '', address: '' },
+      tableModel: [
+        { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+        { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+        { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+        { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+        { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+      ],
+    }
+  },
+}
+</script>
+```
+
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+schema | JSON Schema配置项列表 | Array | - | []
diff --git a/examples/views/docs/component/schema.md b/examples/views/docs/component/schema.md
deleted file mode 100644
index 457d7eb..0000000
--- a/examples/views/docs/component/schema.md
+++ /dev/null
@@ -1,155 +0,0 @@
-# Schema 方案
-
-根据JSON Schema配置自动生成一个包含搜索条件、表格、编辑表单、详情表单的页面
-
-## 基础用法
-
-通过配置`JSON Schema`快速生成CURD逻辑
-
-::: snippet 通过`list`配置项目
-
-```html
-<template>
-  <z-schema :list="list" :search-api="searchAPI" :get-api="getAPI" :submit-api="submitAPI" :delete-api="deleteAPI" auto real-selection>
-    <el-table-column type="selection" align="center" width="40"></el-table-column>
-    <template #header>
-      <el-tabs v-model="activeName">
-        <el-tab-pane label="待执行" name="wait"></el-tab-pane>
-        <el-tab-pane label="已执行" name="done"></el-tab-pane>
-      </el-tabs>
-    </template>
-    <template #button="{ size, openDialog }">
-      <el-button :size="size" plain>删除</el-button>
-      <el-button :size="size" plain @click="openDialog('other', '追加')">追加操作</el-button>
-    </template>
-    <template #dialog-other="{ model, closeDialog }">
-      <el-tag type="success">其它页面</el-tag>
-      <el-input
-        type="textarea"
-        :rows="2"
-        placeholder="请输入内容"
-        v-model="model.name">
-      </el-input>
-      <el-button @click="closeDialog">关闭弹出框</el-button>
-    </template>
-  </z-schema>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      activeName: 'wait',
-      list: [
-        { type: 'el-input', label: '姓名', key: 'name', rules: [{ required: true, message: '请输入', trigger: 'change' }] },
-        { type: 'el-input', label: '年龄', key: 'age' },
-      ]
-    }
-  },
-  methods: {
-    searchAPI(params) {
-      console.log(params);
-      return new Promise(resolve => {
-        setTimeout(() => {
-          const list = [
-            { id: '0', name: '李饼', age: 32, location: { lat: 0, lng: 0 } },
-            { id: '1', name: '陈拾', age: 20 },
-            { id: '2', name: '阿里巴巴', age: 24 },
-            { id: '3', name: '王七', age: 26 },
-            { id: '4', name: '崔倍', age: 27 },
-            { id: '5', name: '孙豹', age: 38 },
-            { id: '6', name: '庞柏', age: 42 },
-            { id: '7', name: '蔡疏', age: 60 },
-            { id: '8', name: '卢纳', age: 55 },
-          ]
-          resolve({
-            result: list,
-            totalCount: list.length
-          });
-        }, 1500);
-      });
-    },
-    getAPI(row) {
-      return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve({ ...row, name: `[${row.name}]` });
-        }, 1500);
-      });
-    },
-    submitAPI(model, config) {
-      console.log(JSON.parse(JSON.stringify(model)));
-      console.log(config);
-      console.log('start');
-      return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          console.log('done');
-          reject();
-        }, 1500);
-      });
-    },
-    deleteAPI() {
-      return new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve();
-        }, 1500);
-      });
-    }
-  }
-}
-</script>
-```
-
-:::
-
-## 内置接口逻辑
-
-如果CURD的接口都是同一路径下，可以使用内置接口逻辑快速对接
-
-::: snippet 通过`url`配置接口路径，`http`设置Promise形式的HTTP请求库
-
-```html
-<template>
-  <z-schema ref="schema" :list="list" url="/customer" :http="$http" :alias="{ getUrl: '/getCustomerByCode', getKey: 'code' }" auto real-selection>
-    <el-table-column type="selection" align="center" width="40"></el-table-column>
-    <template #render-code="{ value, row, openView }">
-      <el-link type="primary" @click="openView(row)">{{ value }}</el-link>
-    </template>
-    <template #view-name="{ value }">
-      <el-tag size="mini">{{ value }}</el-tag>
-    </template>
-    <template #cell-name="{ value }">
-      <el-tag size="mini" type="danger">{{ value }}</el-tag>
-    </template>
-    <template #form-id="{ value }">
-      <el-tag size="mini">{{ value }}</el-tag>
-    </template>
-  </z-schema>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      activeName: 'wait',
-      list: [
-        { type: 'el-input', label: 'ID', key: 'id', props: { disabled: true }, include: 'form', visible: () => this.$refs.schema.dialogType === 'edit' },
-        { type: 'el-input', label: '编号', key: 'code' },
-        { type: 'el-input', label: '名称', key: 'name' },
-      ]
-    }
-  },
-  methods: {
-  }
-}
-</script>
-```
-
-:::
-
-## API
-
-## Attribute 属性
-
-参数|说明|类型|可选值|默认值
--|-|-|-|-
-list | JSON Schema配置项列表 | Array | - | []
diff --git a/examples/views/docs/design/table.md b/examples/views/docs/design/table.md
new file mode 100644
index 0000000..2b30c87
--- /dev/null
+++ b/examples/views/docs/design/table.md
@@ -0,0 +1,164 @@
+

+# 表格设计规范
+
+## 一、表头
+
+### 对齐方式
+
+文本信息左对齐，因为现代人的阅读方式习惯从左到右，符合正常的心智；
+
+数据信息右对齐，更加方便数字大小的直观对比；
+
+固定内容居中对齐，更好的信息呈现及表格空间的节省；
+
+表头与信息内容对齐方式一致，一致性以达到简化，降低视觉噪音。
+
+### 排序
+
+按照时间、名称降序排列
+
+## 二、列
+
+### 对齐方式
+
+与表头对齐方式保持一致
+
+### 列宽
+
+默认不设置列宽，自动适配
+
+时间YYYY-MM-DD HH:mm:ss，最小宽度140
+
+### 数据截断
+
+动态内容，无法确认宽度时，默认设置show-overflow-tooltip
+
+内容大于240时，必须设置show-overflow-tooltip
+
+### 详情入口
+
+默认为第一列，如订单号、运单号、名称
+
+特殊情况下可显示在操作列
+
+### 展开行
+
+列数较多且内容不便用表格展示时，可以设置展开行
+
+## 三、单元格
+
+### 默认文本
+
+样式默认即可
+
+使用插槽自定义时，进行空值处理，防止出现null、undefined
+
+### 组件
+
+特点、标签类的内容，可以使用el-tag进行展示
+
+布尔类型的数据，可以用el-tag或者红绿指示点，避免通篇显示是否
+
+### 行内编辑
+
+修改内容只有1个值时，使用行内编辑
+
+修改内容大于1个值时，使用el-dialog或el-drawer
+
+### 快捷操作
+
+频繁复制的内容，设置快速复制按钮
+
+入口列的内容，使用el-link，表示可以点击跳转
+
+行内编辑单元格，显示行内编辑操作按钮
+
+## 四、操作列
+
+### 默认项
+
+默认悬浮固定在表格右侧
+
+默认展示编辑、删除按钮
+
+使用图标代替文字展示操作按钮，避免操作列因大量文字展示过长
+
+设置图标时，必须设置title属性，鼠标悬停时显示说明内容
+
+### 宽度
+
+设置与当前操作行按钮数量总宽度相当，避免出现多余空位
+
+出现过多操作按钮，保留使用频率最高的按钮，其余的显示为“更多”，下拉展示
+
+### 展示方式
+
+文本
+
+图标
+
+下拉列表
+
+### 功能提示
+
+设置title对当前功能进行描述
+
+## 五、浮动列
+
+### 表格选择列
+
+宽度固定40
+
+### 主要内容列
+
+列数多时左侧固定
+
+设置快捷操作，跳转入口、快速复制
+
+## 六、表格设置
+
+### 宽度
+
+默认100%即可，不要设置固定宽度
+
+### 高度
+
+正常情况下，不设置表格的固定高度
+
+最大高度以当前分页条数为准
+
+### 边框
+
+开启边框
+
+### 斑马纹
+
+不设置斑马纹
+
+### 树形数据
+
+包含层级的功能，如菜单、组织等功能，使用树形数据展示
+
+## 七、业务数据
+
+### 常规数字
+
+右对齐
+
+### 金额数字
+
+千分位、保留两位小数、右对齐
+
+### 时间展示
+
+格式化YYYY-MM-DD HH:mm:ss
+
+### 类型标签
+
+单个描述性特点时，使用el-tag
+
+多个同类描述性特点时，在单个列中同时展示多个el-tag
+
+### 活动指示器
+
+布尔类型值，优先用指示器，避免直接显示“是”“否”
diff --git a/examples/views/docs/develop/schema/schema-form.md b/examples/views/docs/develop/schema/schema-form.md
deleted file mode 100644
index 9bf9c18..0000000
--- a/examples/views/docs/develop/schema/schema-form.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Schema Form 方案表单
-
-通过配置JSON Schema的方式快速生成一个表单
-
-## 基础用法
-
-::: snippet 预置了许多业务逻辑，避免重复维护相同的业务逻辑
-
-```html
-<template>
-  <div>
-    <div>{{ form }}</div>
-    <z-schema-form v-model="form" :schema="schema" @submit="onSubmit" @cancel="onCancel">
-      <template #error-name>
-        <div><span>请输入</span><el-tag size="mini">格式正确</el-tag><span>的姓名</span></div>
-      </template>
-      <template #label-packages>
-        <el-tooltip content="详情" placement="top" effect="light">
-          <i class="el-icon-question"></i>
-        </el-tooltip>
-        <span>包裹</span>
-      </template>
-    </z-schema-form>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        name: '张三',
-        age: 27,
-        address: '上海市青浦区华新镇纪鹤公路1988号',
-        packages: ['零食'],
-        info: {
-          mobile: '18888888888',
-        }
-      },
-      schema: {
-        props: { labelWidth: '70px', size: 'small', span: 12 },
-        items: [
-          { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
-          { is: 'el-input-number', prop: 'age', label: '年龄' },
-          { is: 'el-input', prop: 'info.mobile', label: '电话' },
-          { is: 'el-divider', props: { 'content-position': 'left' }, render: '收货信息', span: 24, labelWidth: '0px' },
-          { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
-          {
-            is: 'el-checkbox-group',
-            prop: 'packages',
-            label: '包裹',
-            children: [
-              { is: 'el-checkbox', props: { label: '零食' } },
-              { is: 'el-checkbox', props: { label: '手机' } },
-              { is: 'el-checkbox', props: { label: '电脑' } },
-            ],
-            span: 24
-          },
-        ]
-      },
-    };
-  },
-  methods: {
-    onSubmit(value) {
-      console.log(value);
-    },
-    onCancel() {
-      console.log('cancal');
-    }
-  }
-};
-</script>
-```
-
-:::
\ No newline at end of file
diff --git a/examples/views/docs/develop/schema/schema-page.md b/examples/views/docs/develop/schema/schema-page.md
deleted file mode 100644
index f76d90a..0000000
--- a/examples/views/docs/develop/schema/schema-page.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Schema 方案开发
-
-通过配置JSON Schema的方式快速生成一些业务组件
-
-## 基础用法
\ No newline at end of file
diff --git a/examples/views/docs/develop/schema/schema-table.md b/examples/views/docs/develop/schema/schema-table.md
deleted file mode 100644
index f76d90a..0000000
--- a/examples/views/docs/develop/schema/schema-table.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Schema 方案开发
-
-通过配置JSON Schema的方式快速生成一些业务组件
-
-## 基础用法
\ No newline at end of file
diff --git a/examples/views/layout/design.vue b/examples/views/layout/design.vue
new file mode 100644
index 0000000..d90a8db
--- /dev/null
+++ b/examples/views/layout/design.vue
@@ -0,0 +1,36 @@
+<template>
+  <el-container>
+    <layout-header @menu-change="handleSelect"></layout-header>
+    <el-container class="layout-container__component">
+      <el-aside class="layout-aside__component" width="300px">
+        <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
+          <h4 class="side-menu__group">设计指南</h4>
+          <el-menu-item-group v-for="(design, idx) in designList" :key="idx">
+            <template slot="title">{{ design.group }}</template>
+            <el-menu-item v-for="(data, index) in design.children" :key="index" :index="data.name">{{ data.meta.title }}</el-menu-item>
+          </el-menu-item-group>
+        </el-menu>
+      </el-aside>
+      <el-main class="layout-main__component">
+        <router-view></router-view>
+      </el-main>
+      <el-aside class="layout-aside__preview" width="200px">
+        <a class="anchor" :class="{ active: item.hash === currentAnchor }" v-for="(item, index) in anchorList" :key="index" @click="jumpAnchor(item)">{{ item.text }}</a>
+      </el-aside>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import ComponentLayout from './component';
+import { designs } from '@/router/routes';
+
+export default {
+  extends: ComponentLayout,
+  data() {
+    return {
+      designList: designs,
+    };
+  },
+};
+</script>
diff --git a/packages/form-item/index.vue b/packages/form-item/index.vue
index c38c583..2c4ef99 100644
--- a/packages/form-item/index.vue
+++ b/packages/form-item/index.vue
@@ -4,7 +4,7 @@ export default {
   props: {
     label: String,
     labelWidth: String,
-    value: [Number, String],
+    value: [Number, String, Array, Object],
     prop: String,
     span: {
       type: [Number, String],
diff --git a/packages/mixins/origin.js b/packages/mixins/origin.js
new file mode 100644
index 0000000..eb79145
--- /dev/null
+++ b/packages/mixins/origin.js
@@ -0,0 +1,59 @@
+export default {
+  data() {
+    return {
+      originData: {},
+      originProps: {},
+    };
+  },
+  created() {
+    const { originData, originProps, ...other } = this._data;
+    this.originData = this.cloneDeep(other);
+    this.originProps = this.cloneDeep(this._props);
+  },
+  methods: {
+    // 深克隆对象
+    cloneDeep(obj) {
+      if (typeof obj !== 'object') {
+        return obj;
+      }
+      if (!obj) {
+        return obj;
+      }
+      if (obj instanceof Date) {
+        return new Date(obj);
+      }
+      if (obj instanceof RegExp) {
+        return new RegExp(obj);
+      }
+      if (obj instanceof Function) {
+        return obj;
+      }
+      let newObj;
+      if (obj instanceof Array) {
+        newObj = [];
+        for (let i = 0, len = obj.length; i < len; i++) {
+          newObj.push(this.cloneDeep(obj[i]));
+        }
+        return newObj;
+      }
+      newObj = {};
+      for (let key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          if (typeof obj[key] !== 'object') {
+            newObj[key] = obj[key];
+          } else {
+            newObj[key] = this.cloneDeep(obj[key]);
+          }
+        }
+      }
+      return newObj;
+    },
+    // 获取初始值
+    getOriginData(key) {
+      if (key) {
+        return this.cloneDeep(this.originData)[key];
+      }
+      return this.cloneDeep(this.originData);
+    },
+  },
+};
diff --git a/packages/schema-form/index.vue b/packages/schema-form/index.vue
index 7bcd483..cfad110 100644
--- a/packages/schema-form/index.vue
+++ b/packages/schema-form/index.vue
@@ -34,7 +34,8 @@ export default {
         const item = props.item || {};
         let content = [];
         if (item.render && typeof item.render === 'function') {
-          content = context.props.render;
+          console.log('render');
+          content = item.render(props.value, h);
         }
         if (item.children) {
           if (Array.isArray(item.children)) {
diff --git a/packages/schema-page/index copy.scss b/packages/schema-page/index copy.scss
new file mode 100644
index 0000000..dc37af8
--- /dev/null
+++ b/packages/schema-page/index copy.scss
@@ -0,0 +1,72 @@
+.z-schema {
+  &__header {
+    margin-bottom: 10px;
+  }
+  &__filter {
+    border: 1px solid #ebeef5;
+    padding-top: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+  &__action {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    line-height: 1;
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .el-button {
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+  }
+  &__table {
+    &-operation {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-start;
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+      .el-button {
+        margin-right: 10px;
+        padding-top: 6px;
+        padding-bottom: 6px;
+      }
+    }
+  }
+  &__dialog-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 10px;
+  }
+  &__footer {
+    margin-top: 10px;
+    text-align: right;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .selection-info {
+      word-break: break-all;
+      white-space: nowrap;
+      font-size: 12px;
+      color: #606266;
+      .num {
+        color: #000;
+        font-weight: bold;
+        padding: 0 5px;
+        font-size: 16px;
+      }
+      .el-button {
+        margin-left: 5px;
+      }
+    }
+    .el-pagination {
+      flex: auto;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/schema-page/index copy.vue b/packages/schema-page/index copy.vue
new file mode 100644
index 0000000..5d54a1d
--- /dev/null
+++ b/packages/schema-page/index copy.vue
@@ -0,0 +1,649 @@
+<style lang="scss">
+@import './index.scss';
+</style>
+
+<template>
+  <div class="z-schema">
+    <!-- 头部内容 -->
+    <div v-if="$scopedSlots.header || $slots.header" class="z-schema__header">
+      <slot name="header" :filterModel="filterModel" v-bind="_slotScope"></slot>
+    </div>
+    <!-- 筛选组件 -->
+    <div v-if="filter" class="z-schema__filter">
+      <z-schema-filter
+        :value="_filterModel"
+        :list="filterList || listMap.filter | noRulesFilter"
+        :size="size"
+        @input="onFilterInput"
+        @search="onSearch"
+        :loading="loading"
+        v-bind="filterProps"
+        :params="_slotScope"
+      ></z-schema-filter>
+    </div>
+    <!-- 按钮区 -->
+    <div v-if="action" class="z-schema__action">
+      <slot v-if="hadSlot('action')" name="action" v-bind="_slotScope"></slot>
+      <template v-else>
+        <el-button :size="size" type="primary" @click="openNew">新增</el-button>
+        <el-button :size="size" plain :disabled="selection.length === 0" @click="handleDeleteMul(selection)">删除</el-button>
+        <slot name="button" v-bind="_slotScope"></slot>
+      </template>
+    </div>
+    <!-- 表格内容 -->
+    <div class="z-schema__table">
+      <z-schema-table
+        ref="table"
+        v-model="tableData"
+        v-loading="loading"
+        :list="tableList || listMap.table"
+        :tableProps="{ border: true, 'row-key': 'id', 'highlight-current-row': true, ...tableProps }"
+        :size="size"
+        @selection-change="onTableSelectionChange"
+        @selection="onTableSelection"
+      >
+        <slot></slot>
+        <!-- 表格列内容渲染 -->
+        <template v-for="(item, index) in renderList">
+          <template v-if="$scopedSlots[`cell-${item.fullKey}`]">
+            <el-table-column :slot="item.fullKey" v-bind="item" :prop="item.agentKey || item.key" :key="`table-cell-${index}`">
+              <template slot-scope="{ row, column, $index }">
+                <slot :name="`cell-${item.fullKey}`" v-bind="{ ...item, ..._slotScope }" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
+              </template>
+            </el-table-column>
+          </template>
+          <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
+            <el-table-column :slot="item.fullKey" v-bind="item" :prop="item.agentKey || item.key" :key="`table-render-${index}`">
+              <template slot-scope="{ row, column, $index }">
+                <slot :name="`render-${item.fullKey}`" v-bind="{ ...item, ..._slotScope }" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
+              </template>
+            </el-table-column>
+          </template>
+        </template>
+        <slot slot="column-append" name="column-append" v-bind="_slotScope"></slot>
+        <!-- 表格尾追加操作列 -->
+        <template #column-end>
+          <slot slot="column-end" name="column-end" v-bind="_slotScope"></slot>
+          <el-table-column v-if="operation" prop="$operation" label="操作" v-bind="{ width: 100, fixed: 'right', ...operationProps }">
+            <div class="z-schema__table-operation" slot-scope="slotScope">
+              <slot name="operation-button" v-bind="{ ..._slotScope, slotScope }"></slot>
+              <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope.row)"></el-button>
+              <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @confirm="handleDelete([slotScope.row])">
+                <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
+              </el-popconfirm>
+              <slot name="operation-button-append" v-bind="{ ..._slotScope, slotScope }"></slot>
+            </div>
+          </el-table-column>
+        </template>
+      </z-schema-table>
+    </div>
+    <!-- 底部区域 -->
+    <div class="z-schema__footer">
+      <div v-if="selection.length > 0" class="selection-info">
+        <span>已选中</span>
+        <span class="num">{{ selection.length }}</span>
+        <span>项</span>
+        <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定清除吗？" placement="top" @confirm="clearSelection">
+          <el-button slot="reference" :size="size" type="text">清除</el-button>
+        </el-popconfirm>
+      </div>
+      <!-- 分页器 -->
+      <el-pagination
+        v-if="pagination"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <!-- 弹出框 -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      destroy-on-close
+      append-to-body
+      :lock-scroll="false"
+      :close-on-click-modal="false"
+      @closed="onDialogClosed"
+      @close="onDialogClose"
+      v-bind="_dialogProps"
+    >
+      <div v-loading="dialogLoading">
+        <!-- 自定义弹出框标题 -->
+        <slot v-if="hadSlot('dialog-title')" slot="title" name="dialog-title" :dialogType="dialogType" v-bind="_slotScope"></slot>
+        <template v-if="dialogRender">
+          <!-- 自定义弹出框内容 -->
+          <slot v-if="hadSlot(`dialog-${dialogType}`)" :name="`dialog-${dialogType}`" :model="_formModel" v-bind="_slotScope"></slot>
+          <template v-else>
+            <!-- 内置弹出框新增修改表单 -->
+            <template v-if="['new', 'edit'].includes(dialogType)">
+              <z-form
+                ref="form"
+                :value="_formModel"
+                :list="formList || listMap.form"
+                @input="onFormInput"
+                @validate="onFormValidate"
+                v-bind="{ span: 12, 'label-width': '110px', ...formProps }"
+                :params="_slotScope"
+              >
+                <!-- 表单自定义插槽 -->
+                <template v-for="item in renderList">
+                  <template v-if="$scopedSlots[`form-${item.fullKey}`]">
+                    <slot :slot="item.fullKey" :name="`form-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+                  </template>
+                </template>
+              </z-form>
+            </template>
+            <!-- 内置弹出框详情表单 -->
+            <template v-else>
+              <z-form
+                ref="form"
+                class="z-schema__view"
+                :value="_formModel"
+                :list="viewList || listMap.form | viewTypeFilter | noRulesFilter"
+                v-bind="{ span: 12, 'label-width': '110px', ...viewProps }"
+                :params="_slotScope"
+              >
+                <!-- 详情自定义插槽渲染 -->
+                <template v-for="item in renderList">
+                  <template v-if="$scopedSlots[`view-${item.fullKey}`]">
+                    <slot :slot="item.fullKey" :name="`view-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+                  </template>
+                  <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
+                    <slot :slot="item.fullKey" :name="`render-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
+                  </template>
+                </template>
+              </z-form>
+            </template>
+          </template>
+          <!-- 内置弹出框新增修改按钮 -->
+          <div class="z-schema__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
+            <el-button :size="size" type="primary" @click="handleConfirm" :loading="submitting">确定</el-button>
+            <el-button :size="size" plain @click="closeDialog">取消</el-button>
+          </div>
+        </template>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { cloneDeep, get } from '../utils';
+import { clear } from '../utils/param';
+
+let propsMap = {};
+const propsKeys = ['tableProps', 'filterProps', 'formProps', 'viewProps', 'dialogProps', 'operationProps'];
+propsKeys.forEach(key => {
+  propsMap[key] = {
+    type: Object,
+    default: () => ({}),
+  };
+});
+const apiKeys = ['searchApi', 'submitApi', 'addApi', 'modifyApi', 'getApi', 'viewApi', 'deleteApi'];
+apiKeys.forEach(key => {
+  propsMap[key] = {
+    type: Function,
+  };
+});
+const blockKeys = ['filter', 'action', 'pagination', 'operation'];
+blockKeys.forEach(key => {
+  propsMap[key] = {
+    type: Boolean,
+    default: true,
+  };
+});
+
+export default {
+  name: 'SchemaPage',
+  props: {
+    ...propsMap,
+    list: Array,
+    filterList: Array,
+    tableList: Array,
+    formList: Array,
+    viewList: Array,
+    size: {
+      type: String,
+      default: 'mini',
+    },
+    formModel: Object,
+    filterModel: Object,
+    auto: Boolean,
+    realSelection: Boolean,
+    url: String, // 请求地址
+    http: Function, // http库
+    alias: Object, // 别名配置
+  },
+  data() {
+    return {
+      filterForm: {},
+      editForm: {},
+      dialogVisible: false,
+      dialogRender: true,
+      dialogType: 'none',
+      dialogLoading: false,
+      dialogTitle: '',
+      dialogPropsHack: {},
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      pageSizes: [10, 20, 50],
+      tableData: [],
+      submitting: false,
+      loading: false,
+      selection: [],
+    };
+  },
+  created() {
+    if (this.auto) {
+      this.search();
+    }
+  },
+  filters: {
+    // 无规则过滤器，过滤掉筛选条件表单中的必填规则等
+    noRulesFilter(val = []) {
+      let list = cloneDeep(val);
+      const clearRules = list => {
+        list.forEach(item => {
+          if (item.list) {
+            clearRules(item.list);
+          } else {
+            delete item.rules;
+          }
+        });
+      };
+      clearRules(list);
+      return list;
+    },
+    // 详情类型过滤器
+    viewTypeFilter(val = []) {
+      let list = cloneDeep(val);
+      const clearRules = list => {
+        list.forEach(item => {
+          item.type = (h, { model, config }) => h('span', config, model[item.key]);
+        });
+      };
+      clearRules(list);
+      return list;
+    },
+  },
+  computed: {
+    listMap() {
+      // 默认作用域
+      const LIST_SPACE = ['filter', 'form', 'table'];
+      const array = {
+        filter: [], // 筛选
+        form: [], // 表单
+        table: [], // 表格
+      };
+      this.list.forEach(item => {
+        // 可以在列表中通过include或exclude设置当前配置的作用域
+        const { include = LIST_SPACE, exclude = [] } = item;
+        // 判断include
+        let _inclue = [];
+        if (include instanceof String || typeof include === 'string') {
+          _inclue = [include];
+        } else if (include instanceof Array && typeof include === 'object') {
+          _inclue = include;
+        }
+        // 判断exclude转换为include的情况
+        let _exclude_include = [];
+        if (exclude instanceof String || typeof exclude === 'string') {
+          _exclude_include = LIST_SPACE.filter(item => item !== exclude);
+        } else if (exclude instanceof Array && typeof exclude === 'object') {
+          _exclude_include = LIST_SPACE.filter(item => !exclude.includes(item));
+        }
+        // 作用域交集
+        const _intersection = _inclue.filter(v => _exclude_include.includes(v));
+        // 返回改配置项的作用域
+        const _list_space = cloneDeep(_intersection);
+        // 将配置项按需分配至各作用域下
+        _list_space.forEach(name => {
+          array[name].push({ ...item, ...(item[name] || {}) });
+        });
+      });
+      return array;
+    },
+    renderList() {
+      // 深度克隆传入的列表，避免原始值被修改
+      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}`;
+          }
+        });
+      };
+      // 生成fullKey
+      generateFullKey(newList);
+      return newList;
+    },
+    _filterModel() {
+      return this.filterModel || this.filterForm || {};
+    },
+    _formModel() {
+      return this.formModel || this.editForm || {};
+    },
+    _slotScope() {
+      return {
+        handleSearch: this.search,
+        openDialog: this.openDialog,
+        closeDialog: this.closeDialog,
+        openView: this.openView,
+        openEdit: this.openEdit,
+        openNew: this.openNew,
+        handleDelete: this.handleDelete,
+        handleDeleteMul: this.handleDeleteMul,
+        size: this.size,
+        dialogType: this.dialogType,
+        selection: this.selection,
+      };
+    },
+    _alias() {
+      const alias = this.alias;
+      const zAlias = this.zAlias;
+      if (alias && zAlias) {
+        return { ...zAlias, ...alias };
+      }
+      return this.alias || this.zAlias || {};
+    },
+    _dialogProps() {
+      return {
+        ...this.dialogProps,
+        ...this.dialogPropsHack,
+      };
+    },
+  },
+  methods: {
+    get,
+    // 空Promise
+    emptyPromise() {
+      return new Promise(resolve => resolve());
+    },
+    // 设置表格选中行
+    toggleRowSelection() {
+      this.tableData.forEach(row => {
+        if (this.selection.find(item => item.id === row.id)) {
+          this.$refs.table && this.$refs.table.toggleRowSelection(row);
+        }
+      });
+    },
+    // 表格选中状态
+    onTableSelectionChange(selection, type) {
+      if (this.realSelection) {
+        if (type === 'check') {
+          const result = this.selection || [];
+          selection.forEach(item => {
+            if (!result.find(i => i.id === item.id)) {
+              result.push(item);
+            }
+          });
+          this.selection = result;
+        } else if (type === 'uncheck') {
+          selection.forEach(i => {
+            this.selection = this.selection.filter(item => item.id !== i.id);
+          });
+        }
+      }
+    },
+    // 表格选中
+    onTableSelection(selection) {
+      if (!this.realSelection) {
+        this.selection = selection;
+      }
+    },
+    // 清除表格选中
+    clearSelection() {
+      this.$refs.table && this.$refs.table.clearSelection();
+      this.selection = [];
+    },
+    // 内置搜索接口
+    _searchAPI(params) {
+      if (this.url && (this.http || this.zHttp)) {
+        const _http = this.http || this.zHttp;
+        return _http({ url: `${clear(this.url)}/${this._alias.pageUrl || 'page'}`, params });
+      }
+      return undefined;
+    },
+    // 重置查询
+    onSearch() {
+      this.currentPage = 1;
+      this.search();
+    },
+    // 搜索
+    async search() {
+      this.loading = true;
+      const params = {
+        ...this._filterModel,
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+      };
+      const searchAPI = this.searchApi || this._searchAPI || this.emptyPromise;
+      await searchAPI(params)
+        .then(res => {
+          const response = res || {};
+          this.tableData = response[this._alias.list || 'list'] || [];
+          this.total = response[this._alias.total || 'total'] || 0;
+          this.$nextTick(this.toggleRowSelection);
+        })
+        .catch(() => {
+          this.$message.error('查询失败');
+        });
+      this.loading = false;
+    },
+    // 更新筛选model
+    onFilterInput(val) {
+      this.filterForm = val || {};
+      this.$emit('update:filterModel', val || {});
+    },
+    // 更新表单model
+    onFormInput(val) {
+      this.editForm = val || {};
+      this.$emit('update:formModel', val || {});
+    },
+    // 内置新增保存接口
+    _addAPI(data) {
+      if (this.url && (this.http || this.zHttp)) {
+        const _http = this.http || this.zHttp;
+        return _http({ url: `${clear(this.url)}/${this._alias.addUrl || 'add'}`, method: 'post', data });
+      }
+      return undefined;
+    },
+    // 内置修改保存接口
+    _modifyAPI(data) {
+      if (this.url && (this.http || this.zHttp)) {
+        const _http = this.http || this.zHttp;
+        return _http({ url: `${clear(this.url)}/${this._alias.modifyUrl || 'modify'}`, method: 'post', data });
+      }
+      return undefined;
+    },
+    // 表单提交且通过校验
+    async onFormValidate(valid, model) {
+      if (valid) {
+        this.submitting = true;
+        let submitAPI = this.submitApi || this.emptyPromise;
+        if (this.dialogType === 'new') {
+          submitAPI = this.addApi || this.submitApi || this._addAPI || this.emptyPromise;
+        } else if (this.dialogType === 'edit') {
+          submitAPI = this.modifyApi || this.submitApi || this._modifyAPI || this.emptyPromise;
+        }
+        submitAPI(model, { type: this.dialogType })
+          .then(() => {
+            this.$message.success('保存成功');
+            this.closeDialog();
+            this.search();
+          })
+          .catch(() => {
+            this.$message.error('保存失败');
+          })
+          .finally(() => {
+            this.submitting = false;
+          });
+      }
+    },
+    // 表单按钮确定
+    handleConfirm() {
+      this.$refs.form && this.$refs.form.validate();
+    },
+    // 表单按钮取消
+    handleCancel() {
+      this.closeDialog();
+    },
+    // 查询是否有某个插槽
+    hadSlot(name) {
+      return !!this.$slots[name] || !!this.$scopedSlots[name];
+    },
+    // 打开新增弹出框
+    openNew() {
+      this.openDialog('new', '新增');
+    },
+    // 内置查询详情接口
+    _getAPI(row) {
+      if (this.url && (this.http || this.zHttp)) {
+        const _http = this.http || this.zHttp;
+        const _getKey = this._alias.getKey || this._alias.primaryKey || 'id';
+        const _resultKey = this._alias.result || 'result';
+        return _http({ url: `${clear(this.url)}/${this._alias.getUrl || 'queryById'}`, params: { [_getKey]: row[_getKey] } }).then(response => response[_resultKey] || {});
+      }
+      return undefined;
+    },
+    // 打开编辑弹出框
+    openEdit(row) {
+      this.dialogLoading = true;
+      this.openDialog('edit', '编辑');
+      const getRow = () =>
+        new Promise(resolve => {
+          resolve(row);
+        });
+      const getAPI = this.getApi || this._getAPI || getRow;
+      getAPI(row)
+        .then(result => {
+          this.editForm = result;
+          this.$emit('update:formModel', result || {});
+        })
+        .finally(() => {
+          this.dialogLoading = false;
+        });
+    },
+    // 内置查询详情接口
+    _viewAPI(row) {
+      if (this.url && (this.http || this.zHttp)) {
+        const _http = this.http || this.zHttp;
+        const _viewKey = this._alias.viewKey || this._alias.getKey || this._alias.primaryKey || 'id';
+        const _resultKey = this._alias.result || 'result';
+        return _http({ url: `${clear(this.url)}/${this._alias.getUrl || 'queryById'}`, params: { [_viewKey]: row[_viewKey] } }).then(response => response[_resultKey] || {});
+      }
+      return undefined;
+    },
+    // 打开详情弹出框
+    openView(row) {
+      this.dialogLoading = true;
+      this.openDialog('view', '详情');
+      const getRow = () =>
+        new Promise(resolve => {
+          resolve(row);
+        });
+      const viewAPI = this.viewApi || this.getApi || this._viewAPI || this._getAPI || getRow;
+      viewAPI(row)
+        .then(result => {
+          this.editForm = result;
+          this.$emit('update:formModel', result || {});
+        })
+        .finally(() => {
+          this.dialogLoading = false;
+        });
+    },
+    // 内置删除接口
+    _deleteAPI(keys) {
+      if (this.url && (this.http || this.zHttp)) {
+        const _http = this.http || this.zHttp;
+        return _http({ url: `${clear(this.url)}/${this._alias.modifyUrl || 'delete'}`, method: 'post', data: keys });
+      }
+      return undefined;
+    },
+    // 删除
+    handleDelete(selection) {
+      const loading = this.$loading({
+        text: '处理中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(255, 255, 255, 0.5)',
+      });
+      const deleteAPI = this.deleteApi || this._deleteAPI || this.emptyPromise;
+      const _deleteKey = this._alias.deleteKey || this._alias.primaryKey || 'id';
+      const keys = selection.map(i => i[_deleteKey]);
+      deleteAPI(keys)
+        .then(() => {
+          this.search();
+          this.$message.success('删除成功');
+        })
+        .finally(() => {
+          loading.close();
+        });
+    },
+    // 批量删除
+    handleDeleteMul(selection) {
+      this.$confirm(`是否删除这 [${selection.length}] 项?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.handleDelete(selection);
+        })
+        .catch(() => {});
+    },
+    // 打开弹出框
+    openDialog(type, title, config) {
+      this.dialogVisible = true;
+      this.dialogRender = true;
+      this.dialogType = type;
+      this.dialogTitle = title;
+      this.dialogPropsHack = config || {};
+      this.$emit('dialog-change', type);
+    },
+    // 关闭弹出框
+    closeDialog() {
+      this.dialogVisible = false;
+    },
+    // 清空表单
+    clearEditForm() {
+      this.editForm = {};
+      this.$emit('update:formModel', {});
+    },
+    // 弹出框关闭
+    onDialogClose() {
+      this.dialogType = 'none';
+      this.dialogRender = false;
+      this.$emit('dialog-change', 'none');
+    },
+    // 弹出框关闭动画结束
+    onDialogClosed() {
+      this.clearEditForm();
+      this.dialogPropsHack = {};
+    },
+    // 分页-每页个数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.$nextTick(this.search);
+    },
+    // 分页-当前页数
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$nextTick(this.search);
+    },
+  },
+};
+</script>
diff --git a/packages/schema-page/index.scss b/packages/schema-page/index.scss
new file mode 100644
index 0000000..a5a1f68
--- /dev/null
+++ b/packages/schema-page/index.scss
@@ -0,0 +1,105 @@
+.z-schema-page {
+  &__header {
+    margin-bottom: 10px;
+  }
+  &__filter {
+    border: 1px solid #ebeef5;
+    padding-top: 10px;
+    padding-right: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+  &__action {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    line-height: 1;
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .el-button {
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+  }
+  &__table {
+    &-operation {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+      .el-button {
+        margin-right: 8px;
+        padding-top: 6px;
+        padding-bottom: 6px;
+      }
+    }
+  }
+  &__dialog-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 10px;
+  }
+  &__footer {
+    margin-top: 10px;
+    text-align: right;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .selection-info {
+      word-break: break-all;
+      white-space: nowrap;
+      font-size: 12px;
+      color: #606266;
+      .num {
+        color: #333;
+        font-weight: bold;
+        padding: 0 5px;
+        font-size: 16px;
+      }
+      .el-button {
+        margin-left: 5px;
+      }
+    }
+    .el-pagination {
+      flex: auto;
+    }
+  }
+}
+
+.z-loading-toast {
+  $toast-color: #fff;
+  $toast-bg-color: #000;
+  background-color: rgba($toast-bg-color, 0);
+  .el-loading-spinner {
+    width: 200px;
+    height: 120px;
+    margin: auto;
+    background-color: rgba($toast-bg-color, 0.7);
+    color: $toast-color;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .path {
+      stroke: $toast-color;
+    }
+    .el-icon-loading {
+      font-size: 32px;
+      color: $toast-color;
+    }
+    .el-loading-text {
+      font-size: 14px;
+      color: $toast-color;
+      margin-top: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/schema-page/index.vue b/packages/schema-page/index.vue
new file mode 100644
index 0000000..c2b7377
--- /dev/null
+++ b/packages/schema-page/index.vue
@@ -0,0 +1,436 @@
+<style lang="scss">
+@import './index.scss';
+</style>
+
+<template>
+  <div class="z-schema-page">
+    <!-- 筛选组件 -->
+    <div v-if="schema.filter" class="z-schema-page__filter">
+      <z-schema-filter :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="loading" @search="onSearch">
+        <template v-for="item in getSlotKeys('filter-')" #[item.name]="slotScope">
+          <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
+        </template>
+      </z-schema-filter>
+    </div>
+    <!-- 按钮区 -->
+    <div v-if="schema.action !== false" class="z-schema-page__action">
+      <slot name="action" v-bind="_slotScope">
+        <el-button :size="_size" type="primary" @click="openNew">新增</el-button>
+        <el-button :size="_size" plain :disabled="selection.length === 0" @click="onDeleteMultiple(selection)">删除</el-button>
+        <slot name="action-button" v-bind="_slotScope"></slot>
+      </slot>
+    </div>
+    <!-- 表格内容 -->
+    <div v-if="schema.table" class="z-schema-page__table">
+      <z-schema-table :schema="schema.table" v-model="tableData" v-loading="loading" @selection-change="onTableSelectionChange">
+        <template #left>
+          <el-table-column v-if="schema.selectable !== false" type="selection" width="40" align="center"></el-table-column>
+        </template>
+        <template v-for="item in getSlotKeys('table-')" #[item.name]="slotScope">
+          <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
+        </template>
+        <slot v-if="schema.operation !== false" name="operation" v-bind="_slotScope">
+          <el-table-column v-bind="{ label: '操作', width: '90', align: 'center', ...(schema.operation || {}) }">
+            <template #default="{ row, column, $index }">
+              <div class="z-schema-page__table-operation">
+                <slot name="operation-left" v-bind="{ ..._slotScope, row, column, $index }"></slot>
+                <slot name="operation-button" v-bind="{ ..._slotScope, row, column, $index }"></slot>
+                <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(row)"></el-button>
+                <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" title="确定删除吗？" placement="top" @confirm="onDelete([row])">
+                  <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
+                </el-popconfirm>
+                <slot name="operation-right" v-bind="{ ..._slotScope, row, column, $index }"></slot>
+              </div>
+            </template>
+          </el-table-column>
+        </slot>
+      </z-schema-table>
+    </div>
+    <!-- 底部区域 -->
+    <div class="z-schema-page__footer">
+      <slot name="pagination" v-bind="_slotScope">
+        <div v-if="selection.length > 0" class="selection-info">
+          <span>已选中</span>
+          <span class="num">{{ selection.length }}</span>
+          <span>项</span>
+        </div>
+        <!-- 分页器 -->
+        <el-pagination
+          v-if="schema.pagination !== false"
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="pageSizes"
+          :page-size="pageSize"
+          :layout="layout"
+          :total="total"
+        >
+        </el-pagination>
+      </slot>
+    </div>
+    <el-dialog :title="elDialogTitle" :visible.sync="visible" v-bind="_dialogProps" @update:visible="onVisibleUpdate" @close="onDialogClose" @closed="onDialogClosed">
+      <template v-if="elDialogRender">
+        <slot v-if="getSlot(`dialog-${elDialogType}`)" :name="`dialog-${elDialogType}`" v-bind="_slotScope"></slot>
+        <div v-else v-loading="dialogLoading">
+          <template v-if="['new', 'edit'].includes(elDialogType)">
+            <z-schema-form
+              :key="`form-${elDialogType}`"
+              ref="form"
+              :value="valueForm"
+              @input="e => $emit('update:value-form', e)"
+              :schema="schema.form"
+              @submit="onFormSubmit"
+              @cancel="closeDialog"
+            >
+              <template v-for="item in getSlotKeys('form-')" #[item.name]="slotScope">
+                <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
+              </template>
+              <template #footer="{ submit, cancel }">
+                <div style="text-align: center">
+                  <el-button :size="_size" type="primary" @click="submit" :loading="submitting">确定</el-button>
+                  <el-button :size="_size" plain @click="cancel">取消</el-button>
+                </div>
+              </template>
+            </z-schema-form>
+          </template>
+          <template v-else-if="elDialogType === 'detail'">
+            <z-schema-form key="form-detail" ref="form" v-model="detail" :schema="schema.detail || detailSchema">
+              <template v-for="item in getSlotKeys('detail-')" #[item.name]="slotScope">
+                <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
+              </template>
+            </z-schema-form>
+          </template>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { cloneDeep, get } from '../utils';
+import { filterout } from '../utils/schema';
+import MIX_ORGIN from '../mixins/origin';
+
+let propsMap = {};
+
+const setKeysDefault = function(keys, value) {
+  keys.reduce(function(result, current) {
+    result[current] = value;
+    return result;
+  }, propsMap);
+};
+setKeysDefault(['value-filter', 'value-form', 'value-detail'], {
+  type: Object,
+  default() {
+    return {};
+  },
+});
+setKeysDefault(['value-table'], {
+  type: Array,
+  default() {
+    return [];
+  },
+});
+setKeysDefault(['size', 'dialogTitle', 'dialogType'], String);
+setKeysDefault(['dialogVisible', 'auto'], Boolean);
+setKeysDefault(['api-search', 'api-submit', 'api-new', 'api-edit', 'api-get', 'api-detail', 'api-delete'], Function);
+
+export default {
+  name: 'SchemaPage',
+  mixins: [MIX_ORGIN],
+  props: {
+    ...propsMap,
+    schema: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selection: [],
+      // 分页参数
+      currentPage: get(this.schema, 'pagination.currentPage') || 1,
+      pageSizes: get(this.schema, 'pagination.pageSizes') || [10, 20, 50, 100],
+      pageSize: get(this.schema, 'pagination.pageSize') || 10,
+      layout: get(this.schema, 'pagination.layout') || 'total, sizes, prev, pager, next, jumper',
+      total: get(this.schema, 'pagination.total') || 0,
+      visible: this.dialogVisible,
+      elDialogRender: true,
+      elDialogType: this.dialogType || 'none',
+      elDialogTitle: this.dialogTitle || '',
+      elDialogProps: {},
+      detailSchema: filterout(cloneDeep(this.schema.form), ['is', 'rules']),
+      detail: this.valueDetail || {},
+      tableData: this.valueTable || [],
+      loading: false,
+      submitting: false,
+      dialogLoading: false,
+    };
+  },
+  created() {
+    if (this.auto || this.schema.auto) {
+      this.onSearch();
+    }
+    console.log(this);
+  },
+  watch: {
+    detailValue(val) {
+      this.detail = val;
+    },
+    detail(val) {
+      this.$emit('update:value-detail', val);
+    },
+    dialogVisible(val) {
+      this.visible = val;
+    },
+    visible(val) {
+      this.$emit('update:dialog-visible', val);
+    },
+    dialogType(val) {
+      this.elDialogType = val;
+    },
+    elDialogType(val) {
+      this.$emit('update:dialog-type', val);
+    },
+    dialogTitle(val) {
+      this.elDialogTitle = val;
+    },
+    elDialogTitle(val) {
+      this.$emit('update:dialog-title', val);
+    },
+    valueTable(val) {
+      this.tableData = val;
+    },
+    tableData(val) {
+      this.$emit('update:value-table', val);
+    },
+  },
+  computed: {
+    slotKeys() {
+      return Object.keys(this.$scopedSlots);
+    },
+    _size() {
+      return this.size || get(this.schema, 'props.size') || (this.$ELEMENT || {}).size || 'small';
+    },
+    _slotScope() {
+      const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total', 'loading'];
+      const methods = ['search', 'onSearch', 'onDelete', 'onDeleteMultiple', 'openNew', 'openEdit', 'openDetail', 'openDialog', 'closeDialog'];
+      const defaultScope = {
+        size: this._size,
+      };
+      return [...properties, ...methods].reduce((result, current) => {
+        result[current] = this[current];
+        return result;
+      }, defaultScope);
+    },
+    _dialogProps() {
+      return {
+        'destroy-on-close': true,
+        'append-to-body': true,
+        'lock-scroll': false,
+        'close-on-click-modal': false,
+        ...(this.schema.dialog || {}),
+        ...this.elDialogProps,
+      };
+    },
+  },
+  methods: {
+    getSlot(name) {
+      return this.$slots[name] || this.$scopedSlots[name];
+    },
+    getSlotKeys(prefix) {
+      return this.slotKeys.reduce((result, current) => {
+        if (current.indexOf(prefix) === 0) {
+          result.push({
+            slot: current,
+            name: current.substring(prefix.length),
+          });
+        }
+        return result;
+      }, []);
+    },
+    // 空Promise
+    emptyPromise() {
+      return new Promise(resolve => resolve());
+    },
+    // 查询
+    search() {
+      if (!this.loading) {
+        this.loading = true;
+        const params = {
+          ...this.valueFilter,
+          currentPage: this.currentPage,
+          pageSize: this.pageSize,
+        };
+        const searchAPI = this.apiSearch || this.emptyPromise;
+        searchAPI(params)
+          .then(res => {
+            const response = res || {};
+            this.tableData = response[this.schema.listKey || 'list'] || [];
+            this.total = response[this.schema.totalKey || 'total'] || 0;
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      }
+    },
+    // 重置查询
+    onSearch() {
+      this.currentPage = 1;
+      this.search();
+    },
+    // 表单提交
+    onFormSubmit(value) {
+      if (this.$listeners['form-submit']) {
+        this.$emit('form-submit', value);
+      } else {
+        this.submitting = true;
+        let submitAPI = this.apiSubmit || this.emptyPromise;
+        if (this.elDialogType === 'new') {
+          submitAPI = this.apiNew || this.apiSubmit || this.emptyPromise;
+        } else if (this.elDialogType === 'edit') {
+          submitAPI = this.apiEdit || this.apiSubmit || this.emptyPromise;
+        }
+        submitAPI(this.valueForm, { type: this.elDialogType })
+          .then(() => {
+            if (this.$listeners['submit-success']) {
+              this.$emit('submit-success');
+            } else {
+              this.$message.success('保存成功');
+            }
+            this.closeDialog();
+            this.search();
+          })
+          .finally(() => {
+            this.submitting = false;
+          });
+      }
+    },
+    // 打开新增
+    openNew() {
+      this.openDialog('new', '新增');
+    },
+    // 打开编辑
+    openEdit(row) {
+      this.dialogLoading = true;
+      this.openDialog('edit', '编辑');
+      const getRow = () =>
+        new Promise(resolve => {
+          resolve(cloneDeep(row));
+        });
+      const getAPI = this.apiGet || getRow;
+      getAPI(cloneDeep(row))
+        .then(result => {
+          if (result) {
+            this.$emit('update:value-form', result);
+          }
+        })
+        .finally(() => {
+          this.dialogLoading = false;
+        });
+    },
+    // 打开详情
+    openDetail(row) {
+      this.dialogLoading = true;
+      this.openDialog('detail', '详情');
+      const getRow = () =>
+        new Promise(resolve => {
+          resolve(cloneDeep(row));
+        });
+      const getAPI = this.apiDetail || this.apiGet || getRow;
+      getAPI(cloneDeep(row))
+        .then(result => {
+          if (result) {
+            this.detail = result;
+            this.$emit('update:value-detail', result);
+          }
+        })
+        .finally(() => {
+          this.dialogLoading = false;
+        });
+    },
+    // 打开弹出框
+    openDialog(type, title, config) {
+      this.elDialogRender = true;
+      this.elDialogType = type;
+      this.elDialogTitle = title;
+      this.elDialogProps = config || {};
+      this.visible = true;
+      this.$emit('dialog-change', type);
+    },
+    // 关闭弹出框
+    closeDialog() {
+      this.visible = false;
+    },
+    // 弹出框显示状态更新
+    onVisibleUpdate(visible) {
+      this.visible = visible;
+    },
+    // 弹出框关闭
+    onDialogClose() {
+      this.elDialogType = 'none';
+      this.$emit('dialog-change', 'none');
+    },
+    // 弹出框关闭动画结束
+    onDialogClosed() {
+      if (this.$refs.form) {
+        this.$refs.form.resetFields();
+      }
+      this.elDialogRender = false;
+      this.elDialogProps = {};
+      this.$emit('update:value-form', this.cloneDeep(this.originProps).valueForm);
+      this.$emit('update:value-detail', this.cloneDeep(this.originProps).detailValue);
+    },
+    // 表格选中状态
+    onTableSelectionChange(selection, type) {
+      this.selection = selection;
+    },
+    // 分页-每页个数
+    onSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+      this.$nextTick(this.search);
+    },
+    // 分页-当前页数
+    onCurrentChange(val) {
+      this.currentPage = val;
+      this.$nextTick(this.search);
+    },
+    // 删除数据
+    onDelete(selection) {
+      const loading = this.$loading({
+        lock: true,
+        text: '处理中',
+        spinner: 'el-icon-loading',
+        customClass: 'z-loading-toast',
+        background: 'rgba(0, 0, 0, 0)',
+      });
+      const deleteAPI = this.apiDelete || this.emptyPromise;
+      deleteAPI(selection)
+        .then(() => {
+          this.search();
+          if (this.$listeners['delete-success']) {
+            this.$emit('delete-success');
+          } else {
+            this.$message.success('删除成功');
+          }
+        })
+        .finally(() => {
+          loading.close();
+        });
+    },
+    // 批量删除
+    onDeleteMultiple(selection) {
+      this.$confirm(`是否删除这 [${selection.length}] 项?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          this.onDelete(selection);
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
diff --git a/packages/schema-table/index.vue b/packages/schema-table/index.vue
index 1bc429c..06c9c06 100644
--- a/packages/schema-table/index.vue
+++ b/packages/schema-table/index.vue
@@ -32,7 +32,7 @@ export default {
   render(h) {
     const schema = this.schema || {};
     const _props = schema.props || {};
-    const _on = schema.on || {};
+    const _on = schema.on || this.$listeners || {};
     return h('z-table', { props: { value: this.model, columns: schema.items, ..._props }, on: _on, scopedSlots: this.$scopedSlots });
   },
 };
diff --git a/packages/schema/index.scss b/packages/schema/index.scss
deleted file mode 100644
index dc37af8..0000000
--- a/packages/schema/index.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.z-schema {
-  &__header {
-    margin-bottom: 10px;
-  }
-  &__filter {
-    border: 1px solid #ebeef5;
-    padding-top: 10px;
-    border-radius: 4px;
-    margin-bottom: 10px;
-  }
-  &__action {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-start;
-    line-height: 1;
-    .el-button + .el-button {
-      margin-left: 0;
-    }
-    .el-button {
-      margin-right: 10px;
-      margin-bottom: 10px;
-    }
-  }
-  &__table {
-    &-operation {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: flex-start;
-      .el-button + .el-button {
-        margin-left: 0;
-      }
-      .el-button {
-        margin-right: 10px;
-        padding-top: 6px;
-        padding-bottom: 6px;
-      }
-    }
-  }
-  &__dialog-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 10px;
-  }
-  &__footer {
-    margin-top: 10px;
-    text-align: right;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .selection-info {
-      word-break: break-all;
-      white-space: nowrap;
-      font-size: 12px;
-      color: #606266;
-      .num {
-        color: #000;
-        font-weight: bold;
-        padding: 0 5px;
-        font-size: 16px;
-      }
-      .el-button {
-        margin-left: 5px;
-      }
-    }
-    .el-pagination {
-      flex: auto;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/schema/index.vue b/packages/schema/index.vue
deleted file mode 100644
index a74d1fd..0000000
--- a/packages/schema/index.vue
+++ /dev/null
@@ -1,649 +0,0 @@
-<style lang="scss">
-@import './index.scss';
-</style>
-
-<template>
-  <div class="z-schema">
-    <!-- 头部内容 -->
-    <div v-if="$scopedSlots.header || $slots.header" class="z-schema__header">
-      <slot name="header" :filterModel="filterModel" v-bind="_slotScope"></slot>
-    </div>
-    <!-- 筛选组件 -->
-    <div v-if="filter" class="z-schema__filter">
-      <z-schema-filter
-        :value="_filterModel"
-        :list="filterList || listMap.filter | noRulesFilter"
-        :size="size"
-        @input="onFilterInput"
-        @search="onSearch"
-        :loading="loading"
-        v-bind="filterProps"
-        :params="_slotScope"
-      ></z-schema-filter>
-    </div>
-    <!-- 按钮区 -->
-    <div v-if="action" class="z-schema__action">
-      <slot v-if="hadSlot('action')" name="action" v-bind="_slotScope"></slot>
-      <template v-else>
-        <el-button :size="size" type="primary" @click="openNew">新增</el-button>
-        <el-button :size="size" plain :disabled="selection.length === 0" @click="handleDeleteMul(selection)">删除</el-button>
-        <slot name="button" v-bind="_slotScope"></slot>
-      </template>
-    </div>
-    <!-- 表格内容 -->
-    <div class="z-schema__table">
-      <z-schema-table
-        ref="table"
-        v-model="tableData"
-        v-loading="loading"
-        :list="tableList || listMap.table"
-        :tableProps="{ border: true, 'row-key': 'id', 'highlight-current-row': true, ...tableProps }"
-        :size="size"
-        @selection-change="onTableSelectionChange"
-        @selection="onTableSelection"
-      >
-        <slot></slot>
-        <!-- 表格列内容渲染 -->
-        <template v-for="(item, index) in renderList">
-          <template v-if="$scopedSlots[`cell-${item.fullKey}`]">
-            <el-table-column :slot="item.fullKey" v-bind="item" :prop="item.agentKey || item.key" :key="`table-cell-${index}`">
-              <template slot-scope="{ row, column, $index }">
-                <slot :name="`cell-${item.fullKey}`" v-bind="{ ...item, ..._slotScope }" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
-              </template>
-            </el-table-column>
-          </template>
-          <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
-            <el-table-column :slot="item.fullKey" v-bind="item" :prop="item.agentKey || item.key" :key="`table-render-${index}`">
-              <template slot-scope="{ row, column, $index }">
-                <slot :name="`render-${item.fullKey}`" v-bind="{ ...item, ..._slotScope }" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
-              </template>
-            </el-table-column>
-          </template>
-        </template>
-        <slot slot="column-append" name="column-append" v-bind="_slotScope"></slot>
-        <!-- 表格尾追加操作列 -->
-        <template #column-end>
-          <slot slot="column-end" name="column-end" v-bind="_slotScope"></slot>
-          <el-table-column v-if="operation" prop="$operation" label="操作" v-bind="{ width: 100, fixed: 'right', ...operationProps }">
-            <div class="z-schema__table-operation" slot-scope="slotScope">
-              <slot name="operation-button" v-bind="{ ..._slotScope, slotScope }"></slot>
-              <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope.row)"></el-button>
-              <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @confirm="handleDelete([slotScope.row])">
-                <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
-              </el-popconfirm>
-              <slot name="operation-button-append" v-bind="{ ..._slotScope, slotScope }"></slot>
-            </div>
-          </el-table-column>
-        </template>
-      </z-schema-table>
-    </div>
-    <!-- 底部区域 -->
-    <div class="z-schema__footer">
-      <div v-if="selection.length > 0" class="selection-info">
-        <span>已选中</span>
-        <span class="num">{{ selection.length }}</span>
-        <span>项</span>
-        <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定清除吗？" placement="top" @confirm="clearSelection">
-          <el-button slot="reference" :size="size" type="text">清除</el-button>
-        </el-popconfirm>
-      </div>
-      <!-- 分页器 -->
-      <el-pagination
-        v-if="pagination"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage"
-        :page-sizes="pageSizes"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-      >
-      </el-pagination>
-    </div>
-    <!-- 弹出框 -->
-    <el-dialog
-      :visible.sync="dialogVisible"
-      :title="dialogTitle"
-      destroy-on-close
-      append-to-body
-      :lock-scroll="false"
-      :close-on-click-modal="false"
-      @closed="onDialogClosed"
-      @close="onDialogClose"
-      v-bind="_dialogProps"
-    >
-      <div v-loading="dialogLoading">
-        <!-- 自定义弹出框标题 -->
-        <slot v-if="hadSlot('dialog-title')" slot="title" name="dialog-title" :dialogType="dialogType" v-bind="_slotScope"></slot>
-        <template v-if="dialogRender">
-          <!-- 自定义弹出框内容 -->
-          <slot v-if="hadSlot(`dialog-${dialogType}`)" :name="`dialog-${dialogType}`" :model="_formModel" v-bind="_slotScope"></slot>
-          <template v-else>
-            <!-- 内置弹出框新增修改表单 -->
-            <template v-if="['new', 'edit'].includes(dialogType)">
-              <z-form
-                ref="form"
-                :value="_formModel"
-                :list="formList || listMap.form"
-                @input="onFormInput"
-                @validate="onFormValidate"
-                v-bind="{ span: 12, 'label-width': '110px', ...formProps }"
-                :params="_slotScope"
-              >
-                <!-- 表单自定义插槽 -->
-                <template v-for="item in renderList">
-                  <template v-if="$scopedSlots[`form-${item.fullKey}`]">
-                    <slot :slot="item.fullKey" :name="`form-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
-                  </template>
-                </template>
-              </z-form>
-            </template>
-            <!-- 内置弹出框详情表单 -->
-            <template v-else>
-              <z-form
-                ref="form"
-                class="z-schema__view"
-                :value="_formModel"
-                :list="viewList || listMap.form | viewTypeFilter | noRulesFilter"
-                v-bind="{ span: 12, 'label-width': '110px', ...viewProps }"
-                :params="_slotScope"
-              >
-                <!-- 详情自定义插槽渲染 -->
-                <template v-for="item in renderList">
-                  <template v-if="$scopedSlots[`view-${item.fullKey}`]">
-                    <slot :slot="item.fullKey" :name="`view-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
-                  </template>
-                  <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
-                    <slot :slot="item.fullKey" :name="`render-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
-                  </template>
-                </template>
-              </z-form>
-            </template>
-          </template>
-          <!-- 内置弹出框新增修改按钮 -->
-          <div class="z-schema__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
-            <el-button :size="size" type="primary" @click="handleConfirm" :loading="submitting">确定</el-button>
-            <el-button :size="size" plain @click="closeDialog">取消</el-button>
-          </div>
-        </template>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { cloneDeep, get } from '../utils';
-import { clear } from '../utils/param';
-
-let propsMap = {};
-const propsKeys = ['tableProps', 'filterProps', 'formProps', 'viewProps', 'dialogProps', 'operationProps'];
-propsKeys.forEach(key => {
-  propsMap[key] = {
-    type: Object,
-    default: () => ({}),
-  };
-});
-const apiKeys = ['searchApi', 'submitApi', 'addApi', 'modifyApi', 'getApi', 'viewApi', 'deleteApi'];
-apiKeys.forEach(key => {
-  propsMap[key] = {
-    type: Function,
-  };
-});
-const blockKeys = ['filter', 'action', 'pagination', 'operation'];
-blockKeys.forEach(key => {
-  propsMap[key] = {
-    type: Boolean,
-    default: true,
-  };
-});
-
-export default {
-  name: 'Schema',
-  props: {
-    ...propsMap,
-    list: Array,
-    filterList: Array,
-    tableList: Array,
-    formList: Array,
-    viewList: Array,
-    size: {
-      type: String,
-      default: 'mini',
-    },
-    formModel: Object,
-    filterModel: Object,
-    auto: Boolean,
-    realSelection: Boolean,
-    url: String, // 请求地址
-    http: Function, // http库
-    alias: Object, // 别名配置
-  },
-  data() {
-    return {
-      filterForm: {},
-      editForm: {},
-      dialogVisible: false,
-      dialogRender: true,
-      dialogType: 'none',
-      dialogLoading: false,
-      dialogTitle: '',
-      dialogPropsHack: {},
-      currentPage: 1,
-      pageSize: 10,
-      total: 0,
-      pageSizes: [10, 20, 50],
-      tableData: [],
-      submitting: false,
-      loading: false,
-      selection: [],
-    };
-  },
-  created() {
-    if (this.auto) {
-      this.search();
-    }
-  },
-  filters: {
-    // 无规则过滤器，过滤掉筛选条件表单中的必填规则等
-    noRulesFilter(val = []) {
-      let list = cloneDeep(val);
-      const clearRules = list => {
-        list.forEach(item => {
-          if (item.list) {
-            clearRules(item.list);
-          } else {
-            delete item.rules;
-          }
-        });
-      };
-      clearRules(list);
-      return list;
-    },
-    // 详情类型过滤器
-    viewTypeFilter(val = []) {
-      let list = cloneDeep(val);
-      const clearRules = list => {
-        list.forEach(item => {
-          item.type = (h, { model, config }) => h('span', config, model[item.key]);
-        });
-      };
-      clearRules(list);
-      return list;
-    },
-  },
-  computed: {
-    listMap() {
-      // 默认作用域
-      const LIST_SPACE = ['filter', 'form', 'table'];
-      const array = {
-        filter: [], // 筛选
-        form: [], // 表单
-        table: [], // 表格
-      };
-      this.list.forEach(item => {
-        // 可以在列表中通过include或exclude设置当前配置的作用域
-        const { include = LIST_SPACE, exclude = [] } = item;
-        // 判断include
-        let _inclue = [];
-        if (include instanceof String || typeof include === 'string') {
-          _inclue = [include];
-        } else if (include instanceof Array && typeof include === 'object') {
-          _inclue = include;
-        }
-        // 判断exclude转换为include的情况
-        let _exclude_include = [];
-        if (exclude instanceof String || typeof exclude === 'string') {
-          _exclude_include = LIST_SPACE.filter(item => item !== exclude);
-        } else if (exclude instanceof Array && typeof exclude === 'object') {
-          _exclude_include = LIST_SPACE.filter(item => !exclude.includes(item));
-        }
-        // 作用域交集
-        const _intersection = _inclue.filter(v => _exclude_include.includes(v));
-        // 返回改配置项的作用域
-        const _list_space = cloneDeep(_intersection);
-        // 将配置项按需分配至各作用域下
-        _list_space.forEach(name => {
-          array[name].push({ ...item, ...(item[name] || {}) });
-        });
-      });
-      return array;
-    },
-    renderList() {
-      // 深度克隆传入的列表，避免原始值被修改
-      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}`;
-          }
-        });
-      };
-      // 生成fullKey
-      generateFullKey(newList);
-      return newList;
-    },
-    _filterModel() {
-      return this.filterModel || this.filterForm || {};
-    },
-    _formModel() {
-      return this.formModel || this.editForm || {};
-    },
-    _slotScope() {
-      return {
-        handleSearch: this.search,
-        openDialog: this.openDialog,
-        closeDialog: this.closeDialog,
-        openView: this.openView,
-        openEdit: this.openEdit,
-        openNew: this.openNew,
-        handleDelete: this.handleDelete,
-        handleDeleteMul: this.handleDeleteMul,
-        size: this.size,
-        dialogType: this.dialogType,
-        selection: this.selection,
-      };
-    },
-    _alias() {
-      const alias = this.alias;
-      const zAlias = this.zAlias;
-      if (alias && zAlias) {
-        return { ...zAlias, ...alias };
-      }
-      return this.alias || this.zAlias || {};
-    },
-    _dialogProps() {
-      return {
-        ...this.dialogProps,
-        ...this.dialogPropsHack,
-      };
-    },
-  },
-  methods: {
-    get,
-    // 空Promise
-    emptyPromise() {
-      return new Promise(resolve => resolve());
-    },
-    // 设置表格选中行
-    toggleRowSelection() {
-      this.tableData.forEach(row => {
-        if (this.selection.find(item => item.id === row.id)) {
-          this.$refs.table && this.$refs.table.toggleRowSelection(row);
-        }
-      });
-    },
-    // 表格选中状态
-    onTableSelectionChange(selection, type) {
-      if (this.realSelection) {
-        if (type === 'check') {
-          const result = this.selection || [];
-          selection.forEach(item => {
-            if (!result.find(i => i.id === item.id)) {
-              result.push(item);
-            }
-          });
-          this.selection = result;
-        } else if (type === 'uncheck') {
-          selection.forEach(i => {
-            this.selection = this.selection.filter(item => item.id !== i.id);
-          });
-        }
-      }
-    },
-    // 表格选中
-    onTableSelection(selection) {
-      if (!this.realSelection) {
-        this.selection = selection;
-      }
-    },
-    // 清除表格选中
-    clearSelection() {
-      this.$refs.table && this.$refs.table.clearSelection();
-      this.selection = [];
-    },
-    // 内置搜索接口
-    _searchAPI(params) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        return _http({ url: `${clear(this.url)}/${this._alias.pageUrl || 'page'}`, params });
-      }
-      return undefined;
-    },
-    // 重置查询
-    onSearch() {
-      this.currentPage = 1;
-      this.search();
-    },
-    // 搜索
-    async search() {
-      this.loading = true;
-      const params = {
-        ...this._filterModel,
-        currentPage: this.currentPage,
-        pageSize: this.pageSize,
-      };
-      const searchAPI = this.searchApi || this._searchAPI || this.emptyPromise;
-      await searchAPI(params)
-        .then(res => {
-          const response = res || {};
-          this.tableData = response[this._alias.list || 'list'] || [];
-          this.total = response[this._alias.total || 'total'] || 0;
-          this.$nextTick(this.toggleRowSelection);
-        })
-        .catch(() => {
-          this.$message.error('查询失败');
-        });
-      this.loading = false;
-    },
-    // 更新筛选model
-    onFilterInput(val) {
-      this.filterForm = val || {};
-      this.$emit('update:filterModel', val || {});
-    },
-    // 更新表单model
-    onFormInput(val) {
-      this.editForm = val || {};
-      this.$emit('update:formModel', val || {});
-    },
-    // 内置新增保存接口
-    _addAPI(data) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        return _http({ url: `${clear(this.url)}/${this._alias.addUrl || 'add'}`, method: 'post', data });
-      }
-      return undefined;
-    },
-    // 内置修改保存接口
-    _modifyAPI(data) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        return _http({ url: `${clear(this.url)}/${this._alias.modifyUrl || 'modify'}`, method: 'post', data });
-      }
-      return undefined;
-    },
-    // 表单提交且通过校验
-    async onFormValidate(valid, model) {
-      if (valid) {
-        this.submitting = true;
-        let submitAPI = this.submitApi || this.emptyPromise;
-        if (this.dialogType === 'new') {
-          submitAPI = this.addApi || this.submitApi || this._addAPI || this.emptyPromise;
-        } else if (this.dialogType === 'edit') {
-          submitAPI = this.modifyApi || this.submitApi || this._modifyAPI || this.emptyPromise;
-        }
-        submitAPI(model, { type: this.dialogType })
-          .then(() => {
-            this.$message.success('保存成功');
-            this.closeDialog();
-            this.search();
-          })
-          .catch(() => {
-            this.$message.error('保存失败');
-          })
-          .finally(() => {
-            this.submitting = false;
-          });
-      }
-    },
-    // 表单按钮确定
-    handleConfirm() {
-      this.$refs.form && this.$refs.form.validate();
-    },
-    // 表单按钮取消
-    handleCancel() {
-      this.closeDialog();
-    },
-    // 查询是否有某个插槽
-    hadSlot(name) {
-      return !!this.$slots[name] || !!this.$scopedSlots[name];
-    },
-    // 打开新增弹出框
-    openNew() {
-      this.openDialog('new', '新增');
-    },
-    // 内置查询详情接口
-    _getAPI(row) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        const _getKey = this._alias.getKey || this._alias.primaryKey || 'id';
-        const _resultKey = this._alias.result || 'result';
-        return _http({ url: `${clear(this.url)}/${this._alias.getUrl || 'queryById'}`, params: { [_getKey]: row[_getKey] } }).then(response => response[_resultKey] || {});
-      }
-      return undefined;
-    },
-    // 打开编辑弹出框
-    openEdit(row) {
-      this.dialogLoading = true;
-      this.openDialog('edit', '编辑');
-      const getRow = () =>
-        new Promise(resolve => {
-          resolve(row);
-        });
-      const getAPI = this.getApi || this._getAPI || getRow;
-      getAPI(row)
-        .then(result => {
-          this.editForm = result;
-          this.$emit('update:formModel', result || {});
-        })
-        .finally(() => {
-          this.dialogLoading = false;
-        });
-    },
-    // 内置查询详情接口
-    _viewAPI(row) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        const _viewKey = this._alias.viewKey || this._alias.getKey || this._alias.primaryKey || 'id';
-        const _resultKey = this._alias.result || 'result';
-        return _http({ url: `${clear(this.url)}/${this._alias.getUrl || 'queryById'}`, params: { [_viewKey]: row[_viewKey] } }).then(response => response[_resultKey] || {});
-      }
-      return undefined;
-    },
-    // 打开详情弹出框
-    openView(row) {
-      this.dialogLoading = true;
-      this.openDialog('view', '详情');
-      const getRow = () =>
-        new Promise(resolve => {
-          resolve(row);
-        });
-      const viewAPI = this.viewApi || this.getApi || this._viewAPI || this._getAPI || getRow;
-      viewAPI(row)
-        .then(result => {
-          this.editForm = result;
-          this.$emit('update:formModel', result || {});
-        })
-        .finally(() => {
-          this.dialogLoading = false;
-        });
-    },
-    // 内置删除接口
-    _deleteAPI(keys) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        return _http({ url: `${clear(this.url)}/${this._alias.modifyUrl || 'delete'}`, method: 'post', data: keys });
-      }
-      return undefined;
-    },
-    // 删除
-    handleDelete(selection) {
-      const loading = this.$loading({
-        text: '处理中',
-        spinner: 'el-icon-loading',
-        background: 'rgba(255, 255, 255, 0.5)',
-      });
-      const deleteAPI = this.deleteApi || this._deleteAPI || this.emptyPromise;
-      const _deleteKey = this._alias.deleteKey || this._alias.primaryKey || 'id';
-      const keys = selection.map(i => i[_deleteKey]);
-      deleteAPI(keys)
-        .then(() => {
-          this.search();
-          this.$message.success('删除成功');
-        })
-        .finally(() => {
-          loading.close();
-        });
-    },
-    // 批量删除
-    handleDeleteMul(selection) {
-      this.$confirm(`是否删除这 [${selection.length}] 项?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          this.handleDelete(selection);
-        })
-        .catch(() => {});
-    },
-    // 打开弹出框
-    openDialog(type, title, config) {
-      this.dialogVisible = true;
-      this.dialogRender = true;
-      this.dialogType = type;
-      this.dialogTitle = title;
-      this.dialogPropsHack = config || {};
-      this.$emit('dialog-change', type);
-    },
-    // 关闭弹出框
-    closeDialog() {
-      this.dialogVisible = false;
-    },
-    // 清空表单
-    clearEditForm() {
-      this.editForm = {};
-      this.$emit('update:formModel', {});
-    },
-    // 弹出框关闭
-    onDialogClose() {
-      this.dialogType = 'none';
-      this.dialogRender = false;
-      this.$emit('dialog-change', 'none');
-    },
-    // 弹出框关闭动画结束
-    onDialogClosed() {
-      this.clearEditForm();
-      this.dialogPropsHack = {};
-    },
-    // 分页-每页个数
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.$nextTick(this.search);
-    },
-    // 分页-当前页数
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.$nextTick(this.search);
-    },
-  },
-};
-</script>
diff --git a/packages/table/editable.vue b/packages/table/editable.vue
index 431ff71..44299e7 100644
--- a/packages/table/editable.vue
+++ b/packages/table/editable.vue
@@ -27,7 +27,15 @@
 </style>
 
 <template>
-  <el-table :data="tableData | tableDataFilter" :size="tableSize" v-bind="bindProps" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
+  <el-table
+    :data="tableData | tableDataFilter"
+    :size="tableSize"
+    v-bind="bindProps"
+    v-on="$listeners"
+    @header-click="onHeaderClick"
+    @cell-click="onCellClick"
+    @cell-dblclick="onCellDblclick"
+  >
     <slot name="left"></slot>
     <template v-for="(item, index) in columns">
       <el-table-column v-bind="item" :key="index">
@@ -48,6 +56,9 @@
             <template v-if="$scopedSlots[`cell-${item.prop}`]">
               <slot :name="`cell-${item.prop}`" :value="row[column.property]" :row="row" :index="$index"></slot>
             </template>
+            <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
+              <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
+            </template>
           </cell-editor>
         </template>
       </el-table-column>
diff --git a/packages/table/index.js b/packages/table/index.js
index 6c45488..a6b2a96 100644
--- a/packages/table/index.js
+++ b/packages/table/index.js
@@ -22,8 +22,6 @@ export default {
     ...tableProps,
   },
   render(h) {
-    const scopedSlots = this.$scopedSlots;
-    const listeners = this.$listeners;
-    return h(`z-table-${this.editable ? 'editable' : 'normal'}`, { props: { ...this._props }, scopedSlots, on: listeners });
+    return h(`z-table-${this.editable ? 'editable' : 'normal'}`, { props: { ...this._props }, scopedSlots: this.$scopedSlots, on: this.$listeners });
   },
 };
diff --git a/packages/table/normal.vue b/packages/table/normal.vue
index 1a94b6a..c3325f1 100644
--- a/packages/table/normal.vue
+++ b/packages/table/normal.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-table :data="tableData" :size="tableSize" v-bind="bindProps">
+  <el-table :data="tableData" :size="tableSize" v-bind="bindProps" v-on="$listeners">
     <slot name="left"></slot>
     <template v-for="(item, index) in columns">
       <el-table-column v-bind="item" :key="index">
@@ -8,7 +8,7 @@
           <slot :name="`cell-${item.prop}`" :value="row[column.property]" :row="row" :index="$index"></slot>
         </template>
         <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
-          <cell-render :item="item" :value="row[item.prop]" :row="row" :column="column" :index="$index"></cell-render>
+          <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
         </template>
       </el-table-column>
     </template>
@@ -19,6 +19,7 @@
 
 <script>
 import tableProps from './props';
+import { get } from '../utils';
 
 export default {
   name: 'TableNormal',
@@ -87,5 +88,8 @@ export default {
       return props;
     },
   },
+  methods: {
+    get,
+  },
 };
 </script>
diff --git a/packages/utils/schema.js b/packages/utils/schema.js
new file mode 100644
index 0000000..123d5eb
--- /dev/null
+++ b/packages/utils/schema.js
@@ -0,0 +1,15 @@
+export const filterout = (schema, key) => {
+  if (schema.items) {
+    schema.items = schema.items.map(item => {
+      if (Array.isArray(key)) {
+        key.forEach(k => {
+          delete item[k];
+        });
+      } else {
+        delete item[key];
+      }
+      return item;
+    });
+  }
+  return schema;
+};
--
libgit2 0.21.0