diff --git a/examples/views/page/form-table/index.vue b/examples/views/page/form-table/index.vue
index 2190f8f..e571ecc 100644
--- a/examples/views/page/form-table/index.vue
+++ b/examples/views/page/form-table/index.vue
@@ -6,11 +6,18 @@
   text-align: right !important;
   padding: 5px 15px !important;
   font-weight: bold;
-  background-color: #ecf7ff;
+  background-color: #F5F7FA;
 }
 .eagle-form-table__value {
   overflow: hidden;
 }
+.eagle-form-table__value .el-input__inner,
+.eagle-form-table__value .el-textarea__inner {
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  border-bottom: 0;
+}
 </style>
 
 <template>
@@ -34,39 +41,67 @@
           <tr v-for="(item, index) in fullProps.list" :key="index" class="el-table__row">
             <template v-if="(item instanceof Array)">
               <template v-for="(col, idx) in item">
-                <td class="eagle-form-table__label" :style="labelStyle" :key="`${index}-${idx}-label`">{{ col.label }}</td>
-                <td class="eagle-form-table__value" :key="`${index}-${idx}-value`" :colspan="getColspan({ item, col, idx })">
-                  <component :is="col.type" v-bind="col.props" size="mini" />
+                <td class="eagle-form-table__label" :style="labelStyle" :key="`${index}-${idx}-label`" :rowspan="col.rowspan">{{ col.label }}</td>
+                <td class="eagle-form-table__value" :key="`${index}-${idx}-value`" :colspan="getColspan({ item, col, idx })" :rowspan="col.rowspan">
+                  <component :is="col.type" v-model="model[col.key]" v-bind="col.props" v-on="bindItemEvent(col)" size="mini" />
                 </td>
               </template>
             </template>
             <template v-else>
-              <td class="eagle-form-table__label" :style="labelStyle">{{ item.label }}</td>
-              <td class="eagle-form-table__value" :colspan="maxColSpan - 1">
-                <component :is="item.type" v-bind="item.props" size="mini" />
+              <td class="eagle-form-table__label" :style="labelStyle" :rowspan="item.rowspan">{{ item.label }}</td>
+              <td class="eagle-form-table__value" :colspan="maxColSpan - 1" :rowspan="item.rowspan">
+                <component :is="item.type" v-model="model[item.key]" v-bind="item.props" v-on="bindItemEvent(item)" size="mini" />
               </td>
             </template>
           </tr>
         </tbody>
       </table>
     </div>
+    <div v-if="$scopedSlots['footer'] || $slots['footer']" class="el-table__footer-wrapper">
+      <table class="el-table__header w-full" cellspacing="0" cellpadding="0">
+        <tbody>
+          <tr>
+            <td class="eagle-form-table__value" :colspan="maxColSpan" style="text-align: center">
+              <slot name="footer"></slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'form-table',
+  props: {
+    value: Object,
+    list: Array,
+    title: String
+  },
   data() {
     return {
+      model: this.value || {},
       fullProps: { ...this.$attrs, ...this.$props },
-      labelStyle: { width: '80px' },
+      labelStyle: { width: '100px' },
+    }
+  },
+  watch: {
+    value(val = {}) {
+      this.model = val;
+    },
+    model: {
+      handler(val) {
+        this.$emit("input", val);
+      },
+      deep: true,
     }
   },
   computed: {
     // 配置列表中的最大列数
     maxColNum() {
       let number = 1;
-      this.fullProps.list.forEach(item => {
+      this.list.forEach(item => {
         if (item instanceof Array) {
           if (item.length > number) {
             number = item.length;
@@ -88,7 +123,23 @@ export default {
         return col.colspan || normalColSpan;
       }
       return 1;
-    }
+    },
+    /**
+     * @description 绑定表单项事件
+     * @param {Object} item 表单项配置
+     * @returns {Function} 事件函数
+     */
+    bindItemEvent(item) {
+      if (item.on) {
+        if (typeof item.on === 'function') {
+          return item.on(this.model);
+        } else {
+          return item.on
+        }
+      } else {
+        return undefined
+      }
+    },
   }
 }
 </script>
diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index a89ceb4..7be8f22 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -9,7 +9,8 @@
 
 <template>
   <div class="page-other">
-    <eg-form-table :list="list"></eg-form-table>
+    {{ model }}
+    <eg-form-table v-model="model" title="标题" :list="list"></eg-form-table>
   </div>
 </template>
 
@@ -26,29 +27,32 @@ export default {
       tableData: [],
       model: {
         name: 'name',
-        location: {
-          areaName: 'hahhhahaa',
-        },
+        // location: {
+        //   areaName: 'hahhhahaa',
+        // },
       },
       list: [
         [
-          { type: 'el-input', label: '名称', key: 'name' },
-          { type: 'el-input-number', label: '年龄', key: 'age' },
-          { type: 'el-input-number', label: '年龄2', key: 'age2' },
-          { type: 'el-input-number', label: '年龄3', key: 'age3' },
-          { type: 'el-input-number', label: '年龄3', key: 'age3' },
+          { type: 'el-input', label: '姓名', key: 'name' },
+          { type: 'el-input', label: '年龄', key: 'age', props: { type: 'number' } },
+          { type: 'el-input', label: '政治面貌', key: 'policy' },
+          { type: 'el-input', label: '籍贯', key: 'hometown' },
+          { type: 'el-switch', label: '婚姻', key: 'marry' },
         ],
         [
-          { type: 'el-input', label: '名称', key: 'name', colspan: 1 },
-          { type: 'el-input-number', label: '年龄', key: 'age' },
-          { type: 'el-input-number', label: '年龄2', key: 'age2', colspan: 4 },
+          { type: 'el-input', label: '曾用名', key: 'oldname', colspan: 1 },
+          { type: 'el-input', label: '现居地', key: 'location' },
+          { type: 'el-input', label: '户籍地', key: 'address', colspan: 3 },
+          { type: 'el-image', label: '相片', key: 'image', props: { src: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1095903005,1370184727&fm=26&gp=0.jpg' },
+            rowspan: 2
+          },
         ],
         [
-          { type: 'el-input', label: '名称1', key: 'name1', colspan: 4 },
-          { type: 'el-input-number', label: '年龄1', key: 'age1' },
+          { type: 'eagle-select', label: '爱好', key: 'hobby', props: { dataSource: [{ label: '游戏', value: '游戏' }] }, colspan: 3 },
+          { type: 'el-input', label: '教育程度', key: 'education', colspan: 3 },
         ],
-        { type: 'el-input', label: '备注', key: 'remark', props: { type: 'textarea', min: 3 } },
-        [{ type: 'el-input', label: '备注1', key: 'remark1', props: { type: 'textarea', min: 2 } }],
+        { type: 'el-input', label: '工作经历', key: 'experience', props: { type: 'textarea', autosize: { minRows: 6 }, placeholder: '请输入' } },
+        [{ type: 'el-input', label: '备注', key: 'remark', props: { type: 'textarea', autosize: { minRows: 3 } } }],
       ],
       option: {
         list: [
@@ -143,25 +147,40 @@ export default {
   mounted() {
     setTimeout(() => {
       this.model = {
-        age: 7,
-        name: '1',
-        location: {
-          locationMin: 'a',
-          district: {
-            province: 'p',
-            city: 'c'
-          },
-          areaName: 'a',
-          homeNum: 'n',
-          anumber: '1',
-          bside: {
-            bnumber: '2'
-          }
-        },
-        height: '3',
-        weight: '4'
+        name: '张三',
+        age: 24,
+        policy: '党员',
+        hometown: '北京',
+        marry: false,
+        oldname: '张二',
+        location: '上海',
+        address: '北京市朝阳区',
+        hobby: '游戏',
+        education: '本科',
+        image: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1095903005,1370184727&fm=26&gp=0.jpg'
+        // experience: '暂无',
+        // remark: '测试'
       }
-      this.tableData = [this.model];
+      // this.model = {
+      //   age: 7,
+      //   name: '1',
+      //   location: {
+      //     locationMin: 'a',
+      //     district: {
+      //       province: 'p',
+      //       city: 'c'
+      //     },
+      //     areaName: 'a',
+      //     homeNum: 'n',
+      //     anumber: '1',
+      //     bside: {
+      //       bnumber: '2'
+      //     }
+      //   },
+      //   height: '3',
+      //   weight: '4'
+      // }
+      // this.tableData = [this.model];
     }, 1000);
   },
   methods: {
--
libgit2 0.21.0