diff --git a/examples/views/page/form-table/index.vue b/examples/views/page/form-table/index.vue
index ce9f174..6f428c9 100644
--- a/examples/views/page/form-table/index.vue
+++ b/examples/views/page/form-table/index.vue
@@ -10,17 +10,24 @@
 .eagle-form-table__value {
   overflow: hidden;
 }
-/* .eagle-form-table__value .el-input__inner,
-.eagle-form-table__value .el-textarea__inner {
+.eagle-form-table__value.noborder .el-input__inner,
+.eagle-form-table__value.noborder .el-textarea__inner {
   border-left: 0;
   border-right: 0;
   border-top: 0;
   border-bottom: 0;
-} */
+}
+.eagle-form-table .el-form-item__error {
+  margin-left: 0;
+}
+.eagle-form-table .el-form-item__content {
+  display: flex;
+  flex-direction: column;
+}
 </style>
 
 <template>
-  <div class="eagle-form-table el-table el-table--fit el-table--border el-table--enable-row-transition el-table--small">
+  <el-form :model="model" inline-message class="eagle-form-table el-table el-table--fit el-table--border el-table--enable-row-transition el-table--small">
     <div v-if="fullProps.title || $scopedSlots['title'] || $slots['title']" class="el-table__header-wrapper">
       <table class="el-table__header w-full" cellspacing="0" cellpadding="0">
         <thead>
@@ -40,15 +47,19 @@
           <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`" :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 class="eagle-form-table__label" :style="labelStyle" :key="`${index}-${idx}-label`" :rowspan="col.rowspan">
+                  <el-form-item :label="col.label" :prop="col.key" :rules="bindItemRules(col)" style="margin-bottom: 0;"></el-form-item>
+                </td>
+                <td class="eagle-form-table__value" :class="{ noborder: !border }" :key="`${index}-${idx}-value`" :colspan="getColspan({ item, col, idx })" :rowspan="col.rowspan">
+                  <el-form-item :prop="col.key" :rules="bindItemRules(col)" style="margin-bottom: 0;">
+                    <component :is="col.type" v-model="model[col.key]" v-bind="col.props" v-on="bindItemEvent(col)" size="mini" />
+                  </el-form-item>
                 </td>
               </template>
             </template>
             <template v-else>
               <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">
+              <td class="eagle-form-table__value" :class="{ noborder: !border }" :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>
@@ -60,14 +71,14 @@
       <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">
+            <td class="eagle-form-table__value" :class="{ noborder: !border }" :colspan="maxColSpan" style="text-align: center">
               <slot name="footer"></slot>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
-  </div>
+  </el-form>
 </template>
 
 <script>
@@ -76,7 +87,11 @@ export default {
   props: {
     value: Object,
     list: Array,
-    title: String
+    title: String,
+    border: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -139,6 +154,14 @@ export default {
         return undefined
       }
     },
+    // 绑定组件校验规则
+    bindItemRules(item) {
+      if (typeof item.rules === 'function') {
+        return item.rules(this.model);
+      } else {
+        return item.rules;
+      }
+    },
   }
 }
 </script>
diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index a589bcb..8645339 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -34,7 +34,7 @@ export default {
       list: [
         [
           { type: 'el-input', label: '姓名', key: 'name', props: { disabled: true } },
-          { type: 'el-input', label: '年龄', key: 'age', props: { type: 'number' } },
+          { type: 'el-input', label: '年龄', key: 'age', props: { type: 'number' }, rules: [{ required: true, message: '请输入年龄' }] },
           { type: 'el-input', label: '政治面貌', key: 'policy' },
           { type: 'el-input', label: '籍贯', key: 'hometown' },
           { type: 'el-switch', label: '婚姻', key: 'marry' },
--
libgit2 0.21.0