组件层次结构树视图增加横向滚动条；组件校验触发功能完善；修复组件隐藏后仍参与表单校验的bug。

src/components/form-designer/form-widget/field-widget/fieldMixin.js

@@ -174,6 +174,10 @@ export default {
       }
     },
 
+    clearFieldRules() {
+      this.rules.splice(0, this.rules.length)  //清空已有
+    },
+
     buildFieldRules() {
       this.rules.splice(0, this.rules.length)  //清空已有
       if (!!this.field.options.required) {
@@ -298,6 +302,9 @@ export default {
 
       //number组件一般不会触发focus事件，故此处需要手工赋值oldFieldValue！！
       this.oldFieldValue = deepClone(value)  /* oldFieldValue需要在initFieldModel()方法中赋初值!! */
+
+      /* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */
+      this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name])
     },
 
     handleFocusCustomEvent(event) {
@@ -449,6 +456,12 @@ export default {
 
     setHidden(flag) {
       this.field.options.hidden = flag
+
+      if (!!flag) {  //清除组件校验规则
+        this.clearFieldRules()
+      } else {  //重建组件校验规则
+        this.buildFieldRules()
+      }
     },
 
     setRequired(flag) {

src/components/form-designer/toolbar-panel/index.vue

@@ -716,6 +716,7 @@
     }
     .el-tree-node__children {
       padding-left: 12px;
+      overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
     }
 
     .el-tree-node :last-child:before {

src/components/form-render/index.vue

@@ -134,8 +134,8 @@
     methods: {
       initFormObject() {
         this.insertCustomStyleAndScriptNode()
-        //this.buildFormModel()
         this.addFieldChangeEventHandler()
+        this.addFieldValidateEventHandler()
         this.registerFormToRefList()
         this.handleOnCreated()
       },
@@ -251,6 +251,13 @@
         })
       },
 
+      addFieldValidateEventHandler() {
+        this.$off('fieldValidation')  //移除原有事件监听
+        this.$on('fieldValidation', (fieldName) => {
+          this.$refs.renderForm.validateField(fieldName)
+        })
+      },
+
       registerFormToRefList() {
         this.widgetRefList['v_form_ref'] = this
       },