From 49a9617edc88ed4d2b8a24d33efede818e27d49d Mon Sep 17 00:00:00 2001
From: "daniel.xiao" <danieldx666@126.com>
Date: Mon, 5 Aug 2019 10:16:16 +0800
Subject: [PATCH 1/3] feat(ncform): add item change event

re #86
---
 CONFIG.md                                     | 15 ++++++++++++++
 CONFIG_CN.md                                  | 15 ++++++++++++++
 .../components/vue-ncform/_others.html        |  7 ++++++-
 .../src/components/vue-ncform/form-item.vue   | 20 +++++++++++++++++--
 .../src/components/vue-ncform/ncform.vue      |  2 +-
 5 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/CONFIG.md b/CONFIG.md
index ccb3565..ac37867 100755
--- a/CONFIG.md
+++ b/CONFIG.md
@@ -281,3 +281,18 @@ Submit a form.
 // Demo code:
 <ncform @submit="submit()"></ncform>
 ```
+
+- change
+
+Form item value change event
+
+```
+// Demo code:
+<ncform @change="onChange"></ncform>
+
+onChange({paths, itemValue, formValue}) {
+  // paths: the path of the item whose value changes
+  // itemValue: the latest value of the item whose value has changed
+  // formVallue: the latest value of the form
+}
+```
diff --git a/CONFIG_CN.md b/CONFIG_CN.md
index 3c75f52..e8fa2ed 100644
--- a/CONFIG_CN.md
+++ b/CONFIG_CN.md
@@ -282,3 +282,18 @@ const allWidgets = this.$ncformAllWidgets();
 // Demo code:
 <ncform @submit="submit()"></ncform>
 ```
+
+- change
+
+表单项值更改事件
+
+```
+// Demo code:
+<ncform @change="onChange"></ncform>
+
+onChange({paths, itemValue, formValue}) {
+  // paths: 发生值变化的项的路径
+  // itemValue：发生值变化的项的最新值
+  // formVallue: 表单的最新值
+}
+```
diff --git a/packages/ncform/examples/components/vue-ncform/_others.html b/packages/ncform/examples/components/vue-ncform/_others.html
index 52ff824..ce9e3e4 100644
--- a/packages/ncform/examples/components/vue-ncform/_others.html
+++ b/packages/ncform/examples/components/vue-ncform/_others.html
@@ -12,7 +12,7 @@
       <template v-for="item in formSchemas">
         <div :data-cy="item.id" v-if="mode !== 'only' || item.only" :key="item.formName">
           <h4>[CASE] {{ item.title }}</h4>
-          <ncform :form-schema="item.formSchema" v-model="item.formSchema.value" :form-name="item.formName" @submit="submit(item.formName)" :is-dirty.sync="item.isFormDirty"></ncform>
+          <ncform :form-schema="item.formSchema" v-model="item.formSchema.value" :form-name="item.formName" @submit="submit(item.formName)" @change="onChange" :is-dirty.sync="item.isFormDirty"></ncform>
 
           <button v-if="['v-model: external update', 'reset', 'is-dirty.sync'].indexOf(item.title) >= 0" class="btn btn-primary" @click="changeModel(item.formSchema)">
             Updated Model
@@ -136,6 +136,11 @@
           },
           changeModel(formSchema) {
             formSchema.value = { user: { name: 'daniel' } };
+          },
+          onChange({paths, itemValue, formValue}) {
+            console.log('paths:', paths);
+            console.log('itemValue:', itemValue);
+            console.log('formValue:', JSON.stringify(formValue, null, 2));
           }
         }
       });
diff --git a/packages/ncform/src/components/vue-ncform/form-item.vue b/packages/ncform/src/components/vue-ncform/form-item.vue
index 15a0c24..592b3de 100755
--- a/packages/ncform/src/components/vue-ncform/form-item.vue
+++ b/packages/ncform/src/components/vue-ncform/form-item.vue
@@ -6,7 +6,7 @@
     <component v-if="isNormalObjSchema(schema)" :is="'ncform-' + schema.ui.widget" :schema="schema" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :idx-chain="idxChain" :config="schema.ui.widgetConfig">
 
       <template v-for="(fieldSchema, fieldName) in schema.properties" :slot="fieldName">
-        <form-item :schema="fieldSchema" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :key="fieldName" :global-config="globalConfig" :complete-schema="completeSchema"></form-item>
+        <form-item :schema="fieldSchema" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :key="fieldName" :global-config="globalConfig" :complete-schema="completeSchema" :paths="paths ? paths + '.' + fieldName : fieldName" :form-name="formName"></form-item>
       </template>
 
     </component>
@@ -15,7 +15,7 @@
     <component v-else-if="isNormalArrSchema(schema)" :is="'ncform-' + schema.ui.widget" :schema="schema" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :idx-chain="idxChain" :config="schema.ui.widgetConfig" class="__ncform-control">
 
       <template v-for="(fieldSchema, fieldName) in (schema.items.properties || {__notObjItem: schema.items})" :slot="fieldName" slot-scope="props">
-        <form-item :schema="props.schema" :key="fieldName" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :idx-chain="(idxChain ? idxChain + ',' : '') + props.idx" :global-config="globalConfig" :complete-schema="completeSchema"></form-item>
+        <form-item :schema="props.schema" :key="fieldName" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :idx-chain="(idxChain ? idxChain + ',' : '') + props.idx" :global-config="globalConfig" :complete-schema="completeSchema" :paths="paths + '[' + props.idx + ']'" :form-name="formName"></form-item>
       </template>
 
     </component>
@@ -137,6 +137,13 @@ export default {
     idxChain: {
       // 用于记录在数组中的索引
       type: String
+    },
+    paths: {
+      // 用于记录字段的路径
+      type: String
+    },
+    formName: {
+      type: String
     }
   },
 
@@ -263,6 +270,15 @@ export default {
 
         // 对比控件改变前后的值，判断是否需要对其进行校验。
         if (changed) {
+          if (!ncformUtils.isNormalObjSchema(newVal) && !ncformUtils.isNormalArrSchema(newVal)) { // 叶子结点
+            const formVM = window.__$ncform.__ncFormsGlobalList[this.formName];
+            formVM.$emit('change', {
+              paths: this.paths,
+              itemValue: this.schema.value,
+              formValue: this.formData
+            })
+          }
+
           if (ncformUtils.isNormalArrSchema(newVal)) {
             this.$data.itemValue = ncformUtils.getModelFromSchema(newVal);
           } else {
diff --git a/packages/ncform/src/components/vue-ncform/ncform.vue b/packages/ncform/src/components/vue-ncform/ncform.vue
index 309f3eb..06bf145 100755
--- a/packages/ncform/src/components/vue-ncform/ncform.vue
+++ b/packages/ncform/src/components/vue-ncform/ncform.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="ncform">
   <form v-if="!isSchemaChanging" novalidate :class="dataFormSchema.globalConfig.style.formCls">
-    <form-item :schema="dataFormSchema" :form-data="formData" :temp-data="tempData" :global-config="dataFormSchema.globalConfig" :complete-schema="dataFormSchema"></form-item>
+    <form-item :schema="dataFormSchema" :form-data="formData" :temp-data="tempData" :global-config="dataFormSchema.globalConfig" :complete-schema="dataFormSchema" :form-name="name"></form-item>
     <!-- button这样处理是为了在Mac下的Safari能否正常使用回车键触发表单的submit事件 -->
     <button @click.prevent="submit()" type="submit" style="position: absolute; left: -100px; visibility: hidden"></button>
   </form>

From 0ab6584ef9a1e4625d27632f0fc675b181461c0e Mon Sep 17 00:00:00 2001
From: "daniel.xiao" <danieldx666@126.com>
Date: Mon, 5 Aug 2019 10:33:19 +0800
Subject: [PATCH 2/3] feat(ncform-theme-elementui input): add
 compound.appendSelect.placeholder and compound.prependSelect

re #85
---
 STD-COMP.md                                               | 6 ++++--
 STD-COMP_CN.md                                            | 6 ++++--
 .../examples/control-comps/input.html                     | 6 ++++--
 .../src/components/control-comps/input.vue                | 8 ++++----
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/STD-COMP.md b/STD-COMP.md
index fdbd004..f05a07a 100755
--- a/STD-COMP.md
+++ b/STD-COMP.md
@@ -63,7 +63,8 @@ If you don't like the cold text description, click on the [interactive version](
         remoteUrl: '', // If it is remote call, fill in the url
         resField: '', // Response result field
       },
-      modelField: '' // An attribute used to bind the value of the input value
+      modelField: '', // An attribute used to bind the value of the input value
+      placeholder: '', // placeholder
     },
     appendSelect: { // Append select, The data used for this kind must be an object
       itemLabelField: 'label', // Item data represents the field of the label
@@ -73,7 +74,8 @@ If you don't like the cold text description, click on the [interactive version](
         remoteUrl: '', // If it is remote call, fill in the url
         resField: '', // Response result field
       },
-      modelField: '' // An attribute used to bind the value of the input value
+      modelField: '', // An attribute used to bind the value of the input value
+      placeholder: '', // placeholder
     }
   }，
 
diff --git a/STD-COMP_CN.md b/STD-COMP_CN.md
index 8a602c4..0d302d5 100644
--- a/STD-COMP_CN.md
+++ b/STD-COMP_CN.md
@@ -63,7 +63,8 @@
         remoteUrl: '', // 如果是远程访问，则填写该url
         resField: '', // 响应结果的字段
       },
-      modelField: '' // 用于绑定input value值的某个属性
+      modelField: '', // 用于绑定input value值的某个属性
+      placeholder: '', // 占位描述
     },
     appendSelect: { // 后置下拉框，使用该种的数据必须是对象
       itemLabelField: 'label', // 项数据表示label的字段
@@ -73,7 +74,8 @@
         remoteUrl: '', // 如果是远程访问，则填写该url
         resField: '', // 响应结果的字段
       },
-      modelField: '' // 用于绑定input value值的某个属性
+      modelField: '', // 用于绑定input value值的某个属性
+      placeholder: '', // 占位描述
     }
   }，
 
diff --git a/packages/ncform-theme-elementui/examples/control-comps/input.html b/packages/ncform-theme-elementui/examples/control-comps/input.html
index 794b977..874c2cd 100755
--- a/packages/ncform-theme-elementui/examples/control-comps/input.html
+++ b/packages/ncform-theme-elementui/examples/control-comps/input.html
@@ -444,7 +444,8 @@ resField: Which field of the response data as the data source, as the example re
                         itemLabelField: 'label', // 项数据表示label的字段
                         itemValueField: 'value', // 项数据表示value的字段
                         enumSource: [{ value: 1, label: 'Man' }, { value: 2, label: 'Woman' }], // 本地数据源
-                        modelField: 'gender' // 用于绑定input value值的某个属性
+                        modelField: 'gender', // 用于绑定input value值的某个属性
+                        placeholder: 'Select',
                       }
                     }
                   }
@@ -489,7 +490,8 @@ note:
                           remoteUrl: '/api/input/getDomains', // 如果是远程访问，则填写该url
                           resField: '' // 响应结果的字段
                         },
-                        modelField: 'domain' // 用于绑定input value值的某个属性
+                        modelField: 'domain', // 用于绑定input value值的某个属性
+                        placeholder: '',
                       }
                     }
                   }
diff --git a/packages/ncform-theme-elementui/src/components/control-comps/input.vue b/packages/ncform-theme-elementui/src/components/control-comps/input.vue
index f84c3f3..05221ac 100755
--- a/packages/ncform-theme-elementui/src/components/control-comps/input.vue
+++ b/packages/ncform-theme-elementui/src/components/control-comps/input.vue
@@ -38,7 +38,7 @@
           v-if="mergeConfig.compound.prependSelect"
           v-model="prependSelectVal"
           slot="prepend"
-          :placeholder="$nclang('selectPls')"
+          :placeholder="mergeConfig.compound.prependSelect.placeholder || $nclang('selectPls')"
         >
           <el-option
             v-for="item in prependSelectOptions"
@@ -52,7 +52,7 @@
           v-if="mergeConfig.compound.appendSelect"
           v-model="appendSelectVal"
           slot="append"
-          :placeholder="$nclang('selectPls')"
+          :placeholder="mergeConfig.compound.appendSelect.placeholder || $nclang('selectPls')"
         >
           <el-option
             v-for="item in appendSelectOptions"
@@ -130,7 +130,7 @@
           v-if="mergeConfig.compound.prependSelect"
           v-model="prependSelectVal"
           slot="prepend"
-          :placeholder="$nclang('selectPls')"
+          :placeholder="mergeConfig.compound.prependSelect.placeholder || $nclang('selectPls')"
         >
           <el-option
             v-for="item in prependSelectOptions"
@@ -144,7 +144,7 @@
           v-if="mergeConfig.compound.appendSelect"
           v-model="appendSelectVal"
           slot="append"
-          :placeholder="$nclang('selectPls')"
+          :placeholder="mergeConfig.compound.appendSelect.placeholder || $nclang('selectPls')"
         >
           <el-option
             v-for="item in appendSelectOptions"

From 525559781900cead0ffa35cdada24a436b74e331 Mon Sep 17 00:00:00 2001
From: "daniel.xiao" <danieldx666@126.com>
Date: Mon, 5 Aug 2019 18:30:52 +0800
Subject: [PATCH 3/3] feat: array / array-table / array-tabs add showOneIfEmpty
 option

re #87
---
 STD-COMP.md                                   |   3 +
 STD-COMP_CN.md                                |   3 +
 .../src/mixins/vue/layout-array-mixin.js      |  31 ++-
 .../integration/examples/array.spec.js        |  55 +++++
 .../integration/examples/input.spec.js        |   6 +-
 .../integration/examples/radio.spec.js        |   5 +-
 .../integration/examples/table.spec.js        |  56 +++++
 .../cypress/integration/examples/tabs.spec.js |  47 ++++
 .../integration/examples/customRule.spec.js   |   2 +
 .../examples/layout-comps/array-table.html    |  26 ++-
 .../examples/layout-comps/array-tabs.html     |  26 ++-
 .../examples/layout-comps/array.html          |  25 +-
 .../examples/components/vue-ncform/_dx.html   |  25 +-
 .../vue-ncform/_layout-widgets.html           |   1 +
 .../components/vue-ncform/_required.html      |  10 +-
 .../components/vue-ncform/_ui.itemClass.html  | 217 +++++++++---------
 .../components/vue-ncform/_ui.label.html      |  20 +-
 17 files changed, 421 insertions(+), 137 deletions(-)

diff --git a/STD-COMP.md b/STD-COMP.md
index f05a07a..d0eb993 100755
--- a/STD-COMP.md
+++ b/STD-COMP.md
@@ -282,6 +282,7 @@ If you don't like the cold text description, click on the [interactive version](
     item: '',
     all: ''
   }, 
+  showOneIfEmpty: false, // Show one item if empty
 }
 ```
 
@@ -301,6 +302,7 @@ If you don't like the cold text description, click on the [interactive version](
     item: '',
     all: ''
   }, 
+  showOneIfEmpty: false, // Show one item if empty
 }
 ```
 
@@ -318,5 +320,6 @@ If you don't like the cold text description, click on the [interactive version](
     item: '',
     all: ''
   }, 
+  showOneIfEmpty: false, // Show one item if empty
 }
 ```
diff --git a/STD-COMP_CN.md b/STD-COMP_CN.md
index 0d302d5..1856730 100644
--- a/STD-COMP_CN.md
+++ b/STD-COMP_CN.md
@@ -282,6 +282,7 @@
     item: '',
     all: ''
   }, 
+  showOneIfEmpty: false, // 当空值时是否显示一项
 }
 ```
 
@@ -301,6 +302,7 @@
     item: '',
     all: ''
   },
+  showOneIfEmpty: false, // 当空值时是否显示一项
 }
 ```
 
@@ -318,5 +320,6 @@
     item: '',
     all: ''
   },
+  showOneIfEmpty: false, // 当空值时是否显示一项
 }
 ```
diff --git a/packages/ncform-common/src/mixins/vue/layout-array-mixin.js b/packages/ncform-common/src/mixins/vue/layout-array-mixin.js
index 8747cdb..0fa739e 100755
--- a/packages/ncform-common/src/mixins/vue/layout-array-mixin.js
+++ b/packages/ncform-common/src/mixins/vue/layout-array-mixin.js
@@ -17,13 +17,14 @@ export default {
     this.$options.lang = window.__$ncform.lang;
     this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
 
-    this.schema.value =
-      this.schema.value && this.schema.value.length > 0
-        ? this.schema.value
-        : [ncformUtils.getDefVal(this.schema.items.type)];
-    this.schema.value.forEach((item, idx) => {
-      this.addItem(idx);
-    });
+    this.schema.value = this.schema.value || [];
+    if (this.schema.value.length === 0) {
+      this._addEmptyItem();
+    } else {
+      this.schema.value.forEach((item, idx) => {
+        this.addItem(idx);
+      });
+    }
 
     this.$data.collapsed = this.mergeConfig.collapsed;
 
@@ -111,6 +112,12 @@ export default {
       this.$set(this.tempData, key, value);
     },
 
+    _addEmptyItem() {
+      if (this.schema.value.length === 0 && this.mergeConfig.showOneIfEmpty) {
+        this.$nextTick(() => this.addItem());
+      }
+    },
+
     isNormalObjSchema: ncformUtils.isNormalObjSchema,
 
     isNormalArrSchema: ncformUtils.isNormalArrSchema,
@@ -145,15 +152,18 @@ export default {
             type: 'warning'
           }).then(() => {
             this.schema.value.splice(idx, 1);
+            this._addEmptyItem();
           })
         } else {
           this.schema.value.splice(idx, 1);
+          this._addEmptyItem();
         }
       } else {
         if (requiredConfirm) {
-          window.confirm(confirmText) && this.schema.value.splice(idx, 1);
+          window.confirm(confirmText) && this.schema.value.splice(idx, 1) && this._addEmptyItem();
         } else {
           this.schema.value.splice(idx, 1);
+          this._addEmptyItem();
         }
       }
     },
@@ -165,15 +175,18 @@ export default {
             type: 'warning'
           }).then(() => {
             this.schema.value = [];
+            this._addEmptyItem();
           })
         } else {
           this.schema.value = [];
+          this._addEmptyItem();
         }
       } else {
         if (requiredConfirm) {
-          window.confirm(confirmText) && (this.schema.value = []);
+          window.confirm(confirmText) && (this.schema.value = []) && this._addEmptyItem();
         } else {
           this.schema.value = [];
+          this._addEmptyItem();
         }
       }
 
diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js
index b0bfdfc..02671b6 100644
--- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js
+++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js
@@ -76,9 +76,11 @@ context('Array', () => {
           cy.get('legend').click();
           cy.get('legend').next().should('be.visible');
 
+          cy.get('button').contains('Add Item').click();
           cy.get('input').should('not.be.visible');
           cy.get('button').find('.el-icon-arrow-up').click()
           cy.get('input').should('be.visible');
+          cy.get('input').its('length').should('equal', 1);
 
           cy.get('button').contains('Add Item').click();
           cy.get('button').find('.el-icon-arrow-up:visible').click()
@@ -363,4 +365,57 @@ context('Array', () => {
     });
   });
 
+  it('showOneIfEmpty option', () => {
+    let formSchema = {
+      type: 'object',
+      properties: {
+        users1: {
+          type: 'array',
+          items: {
+            type: 'string'
+          },
+          ui: {
+            widgetConfig: {
+              showOneIfEmpty: true
+            }
+          }
+        }
+      }
+    };
+    cy.window()
+      .its('editor')
+      .invoke('setValue', JSON.stringify(formSchema, null, 2));
+    common.startRun();
+
+    cy.get('body').as('body');
+
+    cy.get('.previewArea').within(() => {
+      // Declare action elements
+      cy.get('legend')
+        .contains('users1')
+        .parent()
+        .within(() => {
+          // 默认有一项
+          cy.get('input').its('length').should('equal', 1);
+          cy.get('input').eq(0).should('have.value', '');
+
+          // 填写值然后删除该项
+          cy.get('input').eq(0).type('daniel');
+          cy.get('input').eq(0).should('have.value', 'daniel');
+          cy.get('.el-icon-remove').eq(0).click();
+          cy.get('input').eq(0).should('have.value', '');
+
+          // 增加多一项，然后删除全部
+          cy.get('button').contains('Add').click();
+          cy.get('input').its('length').should('equal', 2);
+          cy.get('input').eq(0).type('daniel');
+          cy.get('input').eq(1).type('sarah');
+          cy.get('button:contains("Delete All")').click();
+          cy.get('input').its('length').should('equal', 1);
+          cy.get('input').eq(0).should('have.value', '');
+        });
+
+      // common.submitForm();
+    });
+  });
 });
diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js
index 25e30b8..9dfdfbb 100644
--- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js
+++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js
@@ -104,7 +104,7 @@ context('input', () => {
           ui: {
             widgetConfig: {
               prefixIcon: 'el-icon-search',
-              trim: false
+              trim: true
             }
           }
         },
@@ -142,7 +142,7 @@ context('input', () => {
         .as('nameInput1');
       cy.get('@nameInput1')
         .type(' daniel  ')
-        .should('have.value', ' daniel  ');
+        .should('have.value', 'daniel');
       cy.get('@nameInput1')
         .parent()
         .find('.el-icon-search')
@@ -165,7 +165,7 @@ context('input', () => {
         .should('not.be.visible');
       cy.get('@nameInput2')
         .type(' daniel  ')
-        .should('have.value', 'daniel');
+        .should('have.value', ' daniel  ');
       cy.get('@nameInput2')
         .parent()
         .find('.el-input__clear')
diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js
index 10e6f96..eea146e 100644
--- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js
+++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js
@@ -205,7 +205,10 @@ context('Radio', () => {
             type: 'string'
           },
           ui: {
-            widget: 'array-table'
+            widget: 'array-table',
+            widgetConfig: {
+              showOneIfEmpty: true
+            }
           }
         },
         name1: {
diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js
index c2fe9e1..e0f6a00 100644
--- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js
+++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js
@@ -81,6 +81,7 @@ context('Table', () => {
           cy.get('legend').click();
           cy.get('legend').next().should('be.visible');
 
+          cy.get('button').contains('Add Item').click();
           cy.get('button').contains('Add Item').click();
           cy.get('input').its('length').should('equal', 2);
 
@@ -360,4 +361,59 @@ context('Table', () => {
     });
   });
 
+  it('showOneIfEmpty option', () => {
+    let formSchema = {
+      type: 'object',
+      properties: {
+        users1: {
+          type: 'array',
+          items: {
+            type: 'string'
+          },
+          ui: {
+            widget: 'array-table',
+            widgetConfig: {
+              showOneIfEmpty: true
+            }
+          }
+        }
+      }
+    };
+    cy.window()
+      .its('editor')
+      .invoke('setValue', JSON.stringify(formSchema, null, 2));
+    common.startRun();
+
+    cy.get('body').as('body');
+
+    cy.get('.previewArea').within(() => {
+      // Declare action elements
+      cy.get('legend')
+        .contains('users1')
+        .parent()
+        .within(() => {
+          // 默认有一项
+          cy.get('input').its('length').should('equal', 1);
+          cy.get('input').eq(0).should('have.value', '');
+
+          // 填写值然后删除该项
+          cy.get('input').eq(0).type('daniel');
+          cy.get('input').eq(0).should('have.value', 'daniel');
+          cy.get('.el-icon-remove').eq(0).click();
+          cy.get('input').eq(0).should('have.value', '');
+
+          // 增加多一项，然后删除全部
+          cy.get('button').contains('Add').click();
+          cy.get('input').its('length').should('equal', 2);
+          cy.get('input').eq(0).type('daniel');
+          cy.get('input').eq(1).type('sarah');
+          cy.get('button:contains("Delete All")').click();
+          cy.get('input').its('length').should('equal', 1);
+          cy.get('input').eq(0).should('have.value', '');
+        });
+
+      // common.submitForm();
+    });
+  });
+
 });
diff --git a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js
index 4d354ce..c5cfe0e 100644
--- a/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js
+++ b/packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js
@@ -79,6 +79,7 @@ context('Tabs', () => {
           cy.get('legend').click();
           cy.get('legend').next().should('be.visible');
 
+          cy.get('.el-icon-plus').click();
           cy.get('.el-icon-plus').click();
           cy.get('.el-tabs__item').its('length').should('equal', 2);
           cy.get('.el-tabs__item:last-child').should('have.class', 'is-active');
@@ -135,4 +136,50 @@ context('Tabs', () => {
     });
   });
 
+  it('showOneIfEmpty option', () => {
+    let formSchema = {
+      type: 'object',
+      properties: {
+        users1: {
+          type: 'array',
+          items: {
+            type: 'string'
+          },
+          ui: {
+            widget: 'array-tabs',
+            widgetConfig: {
+              showOneIfEmpty: true
+            }
+          }
+        }
+      }
+    };
+    cy.window()
+      .its('editor')
+      .invoke('setValue', JSON.stringify(formSchema, null, 2));
+    common.startRun();
+
+    cy.get('body').as('body');
+
+    cy.get('.previewArea').within(() => {
+      // Declare action elements
+      cy.get('legend')
+        .contains('users1')
+        .parent()
+        .within(() => {
+          // 默认有一项
+          cy.get('.el-tabs__item').its('length').should('equal', 1);
+          cy.get('input').should('have.value', '');
+
+          // 填写值然后删除该项
+          cy.get('input').type('daniel');
+          cy.get('input').should('have.value', 'daniel');
+          cy.get('.el-icon-close').click();
+          cy.get('input').should('have.value', '');
+        });
+
+      // common.submitForm();
+    });
+  });
+
 });
diff --git a/packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js b/packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js
index 97cc550..24b640f 100644
--- a/packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js
+++ b/packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js
@@ -29,6 +29,8 @@ context('rules.customRule', () => {
   it('rules.customRule in Array', () => {
     let id = md5('rules.customRule in Array');
     cy.get(`[data-cy=${id}]`).within(() => {
+      cy.get('legend').contains('rows').parent().find('button').contains('Add').click();
+
       cy.get('label').contains('maxNum').next().find('input').as('maxNumInput');
       cy.get('label').contains('minNum').next().find('input').as('minNumInput');
 
diff --git a/packages/ncform-theme-elementui/examples/layout-comps/array-table.html b/packages/ncform-theme-elementui/examples/layout-comps/array-table.html
index a396aee..0da1fb4 100755
--- a/packages/ncform-theme-elementui/examples/layout-comps/array-table.html
+++ b/packages/ncform-theme-elementui/examples/layout-comps/array-table.html
@@ -316,7 +316,31 @@ Prompt information can be configured via delConfirmText when requiredDelConfirm
 2. delConfirmText.all: delete all confirmation information
          `
           }
-        }
+        },
+        {
+          title: {
+            cn: '[属性] showOneIfEmpty: 当空值时是否显示一项',
+            en:
+              '[ATTR] showOneIfEmpty: Show one item at least if empty'
+          },
+          schema: {
+            type: 'object',
+            properties: {
+              user: {
+                type: 'array',
+                items: {
+                  type: 'string'
+                },
+                ui: {
+                  widget: 'array-table',
+                  widgetConfig: {
+                    showOneIfEmpty: true
+                  }
+                }
+              }
+            }
+          }
+        },
       ];
 
       // Bootstrap the app
diff --git a/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html b/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html
index 48f42d8..7dae0e2 100755
--- a/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html
+++ b/packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html
@@ -273,7 +273,31 @@ Prompt information can be configured via delConfirmText when requiredDelConfirm
 1. delConfirmText.item: delete item confirmation information
          `
           }
-        }
+        },
+        {
+          title: {
+            cn: '[属性] showOneIfEmpty: 当空值时是否显示一项',
+            en:
+              '[ATTR] showOneIfEmpty: Show one item at least if empty'
+          },
+          schema: {
+            type: 'object',
+            properties: {
+              user: {
+                type: 'array',
+                items: {
+                  type: 'string'
+                },
+                ui: {
+                  widget: 'array-tabs',
+                  widgetConfig: {
+                    showOneIfEmpty: true
+                  }
+                }
+              }
+            }
+          }
+        },
       ];
 
       // Bootstrap the app
diff --git a/packages/ncform-theme-elementui/examples/layout-comps/array.html b/packages/ncform-theme-elementui/examples/layout-comps/array.html
index 9766bb2..484f666 100755
--- a/packages/ncform-theme-elementui/examples/layout-comps/array.html
+++ b/packages/ncform-theme-elementui/examples/layout-comps/array.html
@@ -350,7 +350,30 @@ Prompt information can be configured via delConfirmText when requiredDelConfirm
 2. delConfirmText.all: delete all confirmation information
          `
           }
-        }
+        },
+        {
+          title: {
+            cn: '[属性] showOneIfEmpty: 当空值时是否显示一项',
+            en:
+              '[ATTR] showOneIfEmpty: Show one item at least if empty'
+          },
+          schema: {
+            type: 'object',
+            properties: {
+              user: {
+                type: 'array',
+                items: {
+                  type: 'string'
+                },
+                ui: {
+                  widgetConfig: {
+                    showOneIfEmpty: true
+                  }
+                }
+              }
+            }
+          }
+        },
       ];
 
       // Bootstrap the app
diff --git a/packages/ncform/examples/components/vue-ncform/_dx.html b/packages/ncform/examples/components/vue-ncform/_dx.html
index eb3a792..fa5b126 100644
--- a/packages/ncform/examples/components/vue-ncform/_dx.html
+++ b/packages/ncform/examples/components/vue-ncform/_dx.html
@@ -72,6 +72,11 @@
                           }
                         }
                       }
+                    },
+                    ui: {
+                      widgetConfig: {
+                        showOneIfEmpty: true
+                      }
                     }
                   }
                 }
@@ -101,11 +106,17 @@
                         }
                       },
                       ui: {
-                        widget: 'array-table'
+                        widget: 'array-table',
+                        widgetConfig: {
+                          showOneIfEmpty: true
+                        }
                       }
                     },
                     ui: {
-                      widget: 'array-table'
+                      widget: 'array-table',
+                      widgetConfig: {
+                        showOneIfEmpty: true
+                      }
                     }
                   }
                 }
@@ -138,12 +149,20 @@
                                 }
                               }
                             }
+                          },
+                          ui: {
+                            widgetConfig: {
+                              showOneIfEmpty: true
+                            }
                           }
                         }
                       }
                     },
                     ui: {
-                      widget: 'array-table'
+                      widget: 'array-table',
+                      widgetConfig: {
+                        showOneIfEmpty: true
+                      }
                     }
                   }
                 }
diff --git a/packages/ncform/examples/components/vue-ncform/_layout-widgets.html b/packages/ncform/examples/components/vue-ncform/_layout-widgets.html
index e37fb65..ccafb4c 100644
--- a/packages/ncform/examples/components/vue-ncform/_layout-widgets.html
+++ b/packages/ncform/examples/components/vue-ncform/_layout-widgets.html
@@ -201,6 +201,7 @@
                         itemCollapse: true,
                         addTxt: 'Add Item',
                         delAllTxt: 'Remove All',
+                        showOneIfEmpty: true
                       }
                     }
                   }
diff --git a/packages/ncform/examples/components/vue-ncform/_required.html b/packages/ncform/examples/components/vue-ncform/_required.html
index 5d36b52..339308f 100644
--- a/packages/ncform/examples/components/vue-ncform/_required.html
+++ b/packages/ncform/examples/components/vue-ncform/_required.html
@@ -62,6 +62,11 @@
                           }
                         }
                       }
+                    },
+                    ui: {
+                      widgetConfig: {
+                        showOneIfEmpty: true
+                      }
                     }
                   },
                   users2: {
@@ -75,7 +80,10 @@
                       }
                     },
                     ui: {
-                      widget: 'array-table'
+                      widget: 'array-table',
+                      widgetConfig: {
+                        showOneIfEmpty: true
+                      }
                     }
                   }
                 }
diff --git a/packages/ncform/examples/components/vue-ncform/_ui.itemClass.html b/packages/ncform/examples/components/vue-ncform/_ui.itemClass.html
index 9de84d9..28359be 100644
--- a/packages/ncform/examples/components/vue-ncform/_ui.itemClass.html
+++ b/packages/ncform/examples/components/vue-ncform/_ui.itemClass.html
@@ -1,138 +1,127 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>vue-ncform Example</title>
 
-    <link
-      rel="stylesheet"
-      href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css"
-    />
+<head>
+  <meta charset="UTF-8" />
+  <title>vue-ncform Example</title>
 
-    <style>
+  <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css" />
 
-      .obj-daniel {
-        border: 1px dashed #409EFF;
-        padding: 0 8px;
-        border-radius: 8px;
-      }
-      .obj-daniel .obj-item-daniel input {
-        border-color: #409EFF;
-      }
+  <style>
+    .obj-daniel {
+      border: 1px dashed #409EFF;
+      padding: 0 8px;
+      border-radius: 8px;
+    }
 
-      .array-daniel {
-        border: 1px dashed #F56C6C;
-        padding: 0 8px 8px 8px;
-        border-radius: 8px;
-      }
-      .array-daniel .array-item-daniel input {
-        border-color: #F56C6C;
-      }
+    .obj-daniel .obj-item-daniel input {
+      border-color: #409EFF;
+    }
 
-      .table-daniel {
-        border: 1px dashed #E6A23C;
-        padding: 0 8px 8px 8px;
-        border-radius: 8px;
-      }
-      .table-daniel .table-item-daniel input {
-        border-color: #E6A23C;
-      }
+    .array-daniel {
+      border: 1px dashed #F56C6C;
+      padding: 0 8px 8px 8px;
+      border-radius: 8px;
+    }
 
-    </style>
-  </head>
+    .array-daniel .array-item-daniel input {
+      border-color: #F56C6C;
+    }
 
-  <body>
-    <div id="demo" class="container">
-      <template v-for="item in formSchemas">
-        <div
-          :data-cy="item.id"
-          v-if="mode !== 'only' || item.only"
-          :key="item.formName"
-        >
-          <h4>[CASE] {{ item.title }}</h4>
-          <ncform
-            :form-schema="item.formSchema"
-            v-model="item.formSchema.value"
-            :form-name="item.formName"
-          ></ncform>
-          <hr />
-        </div>
-      </template>
-    </div>
+    .table-daniel {
+      border: 1px dashed #E6A23C;
+      padding: 0 8px 8px 8px;
+      border-radius: 8px;
+    }
 
-    <script
-      type="text/javascript"
-      src="../../../node_modules/vue/dist/vue.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://unpkg.com/blueimp-md5@2.10.0/js/md5.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"
-    ></script>
-    <script type="text/javascript" src="../../../dist/vueNcform.js"></script>
-    <script type="text/javascript">
-      Vue.use(vueNcform, { lang: 'en' });
+    .table-daniel .table-item-daniel input {
+      border-color: #E6A23C;
+    }
+  </style>
+</head>
 
-      new Vue({
-        el: '#demo',
-        data: {
-          mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
-          formSchemas: [
-            {
-              id: md5('Add item class'),
-              title: 'Add item class',
-              formName: 'form_' + Math.random(),
-              formSchema: {
-                type: 'object',
-                properties: {
-                  user: {
-                    type: 'object',
-                    properties: {
-                      name: {
-                        type: 'string',
-                        ui: {
-                          itemClass: 'obj-item-daniel'
-                        }
+<body>
+  <div id="demo" class="container">
+    <template v-for="item in formSchemas">
+      <div :data-cy="item.id" v-if="mode !== 'only' || item.only" :key="item.formName">
+        <h4>[CASE] {{ item.title }}</h4>
+        <ncform :form-schema="item.formSchema" v-model="item.formSchema.value" :form-name="item.formName"></ncform>
+        <hr />
+      </div>
+    </template>
+  </div>
+
+  <script type="text/javascript" src="../../../node_modules/vue/dist/vue.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/blueimp-md5@2.10.0/js/md5.js"></script>
+  <script type="text/javascript" src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
+  <script type="text/javascript" src="../../../dist/vueNcform.js"></script>
+  <script type="text/javascript">
+    Vue.use(vueNcform, { lang: 'en' });
+
+    new Vue({
+      el: '#demo',
+      data: {
+        mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
+        formSchemas: [
+          {
+            id: md5('Add item class'),
+            title: 'Add item class',
+            formName: 'form_' + Math.random(),
+            formSchema: {
+              type: 'object',
+              properties: {
+                user: {
+                  type: 'object',
+                  properties: {
+                    name: {
+                      type: 'string',
+                      ui: {
+                        itemClass: 'obj-item-daniel'
                       }
-                    },
-                    ui: {
-                      itemClass: 'obj-daniel'
                     }
                   },
-                  users: {
-                    type: 'array',
-                    items: {
-                      type: 'string',
-                        ui: {
-                          itemClass: 'array-item-daniel'
-                        }
-                    },
+                  ui: {
+                    itemClass: 'obj-daniel'
+                  }
+                },
+                users: {
+                  type: 'array',
+                  items: {
+                    type: 'string',
                     ui: {
-                      itemClass: 'array-daniel'
+                      itemClass: 'array-item-daniel'
                     }
                   },
-                  users1: {
-                    type: 'array',
-                    items: {
-                      type: 'string',
-                        ui: {
-                          itemClass: 'table-item-daniel'
-                        }
-                    },
+                  ui: {
+                    itemClass: 'array-daniel',
+                    widgetConfig: {
+                      showOneIfEmpty: true
+                    }
+                  }
+                },
+                users1: {
+                  type: 'array',
+                  items: {
+                    type: 'string',
                     ui: {
-                      itemClass: 'table-daniel',
-                      widget: 'array-table'
+                      itemClass: 'table-item-daniel'
+                    }
+                  },
+                  ui: {
+                    itemClass: 'table-daniel',
+                    widget: 'array-table',
+                    widgetConfig: {
+                      showOneIfEmpty: true
                     }
                   }
                 }
               }
             }
-          ]
-        }
-      });
-    </script>
-  </body>
+          }
+        ]
+      }
+    });
+  </script>
+</body>
+
 </html>
diff --git a/packages/ncform/examples/components/vue-ncform/_ui.label.html b/packages/ncform/examples/components/vue-ncform/_ui.label.html
index 9077132..7819f90 100644
--- a/packages/ncform/examples/components/vue-ncform/_ui.label.html
+++ b/packages/ncform/examples/components/vue-ncform/_ui.label.html
@@ -248,7 +248,10 @@
                       type: 'string'
                     },
                     ui: {
-                      legend: 'dx: {{$root.users[0]}} + " info-array"'
+                      legend: 'dx: {{$root.users[0]}} + " info-array"',
+                      widgetConfig: {
+                        showOneIfEmpty: true
+                      }
                     }
                   },
                   users1: {
@@ -258,7 +261,10 @@
                     },
                     ui: {
                       legend: 'dx: {{$root.users1[0]}} + " info-table"',
-                      widget: 'array-table'
+                      widget: 'array-table',
+                      widgetConfig: {
+                        showOneIfEmpty: true
+                      }
                     }
                   }
                 }
@@ -283,7 +289,10 @@
                       }
                     },
                     ui: {
-                      widget: 'array-table'
+                      widget: 'array-table',
+                      widgetConfig: {
+                        showOneIfEmpty: true
+                      }
                     }
                   },
                   users1: {
@@ -293,6 +302,11 @@
                       ui: {
                         label: 'dx: "dx from: " + {{$root.company}}'
                       }
+                    },
+                    ui: {
+                      widgetConfig: {
+                        showOneIfEmpty: true
+                      }
                     }
                   }
                 }