feat: exclude hidden nodes when rendering

F-loat · Dec 31, 2019 · 6148dd0 · 6148dd0
1 parent 6e3a80c
commit 6148dd0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 11 deletions.
diff --git a/packages/ncform-theme-elementui/src/components/layout-comps/array.vue b/packages/ncform-theme-elementui/src/components/layout-comps/array.vue
@@ -10,7 +10,7 @@
     <div v-show="!collapsed" v-for="(dataItem, idx) in schema.value" :key="dataItem.__dataSchema.__id" class="list-item">
 
       <div class="list-item-label">
-        <label>{{_analyzeVal(dataItem.__dataSchema.ui.label)}} {{idx + 1}}</label>
+        <!-- <label>{{_analyzeVal(dataItem.__dataSchema.ui.label)}} {{idx + 1}}</label> -->
 
         <!-- 项控制按钮 -->
         <div class="el-button-group">

diff --git a/packages/ncform-theme-elementui/src/components/layout-comps/object.vue b/packages/ncform-theme-elementui/src/components/layout-comps/object.vue
@@ -8,10 +8,9 @@
     <!-- 垂直布局，即label上，control下 -->
     <div v-if="mergeConfig.layout === 'v'" v-show="!collapsed" class="el-row v-layout" style="width: 100%">
 
-      <div v-for="(fieldSchema, field) in schema.properties"
+      <div v-for="(fieldSchema, field) in filteredPropreties"
           :key="field"
           :class="['el-col-' + (fieldSchema.ui.columns * 2 || 24)]"
-          :style="{display: _analyzeVal(fieldSchema.ui.hidden) ? 'none' : ''}"
           class="el-col el-form-item">
 
         <template>
@@ -20,9 +19,9 @@
               <i v-if="_analyzeVal(fieldSchema.rules.required) === true || (typeof fieldSchema.rules.required === 'object' && _analyzeVal(fieldSchema.rules.required.value) === true)" class="text-danger">*</i>
               {{_analyzeVal(fieldSchema.ui.label)}}
               <!-- 提示信息 -->
-              <el-tooltip class="item" effect="dark" :content="fieldSchema.ui.help.content" placement="right-start">
+              <el-tooltip v-if="fieldSchema.ui.help.show === true" class="item" effect="dark" :content="fieldSchema.ui.help.content" placement="right-start">
                 <div slot="content" v-html="fieldSchema.ui.help.content"></div>
-                <a class="help" v-if="fieldSchema.ui.help.show === true" href="#"><span :class="fieldSchema.ui.help.iconCls">{{fieldSchema.ui.help.text}}</span></a>
+                <a class="help" href="#"><span :class="fieldSchema.ui.help.iconCls">{{fieldSchema.ui.help.text}}</span></a>
               </el-tooltip>
             </label>
 
@@ -41,10 +40,9 @@
 
     <!-- 水平布局，即label左，control右 -->
     <div v-if="mergeConfig.layout === 'h'" v-show="!collapsed" class="el-row h-layout" style="width: 100%">
-      <div v-for="(fieldSchema, field) in schema.properties"
+      <div v-for="(fieldSchema, field) in filteredPropreties"
           :key="field"
           :class="['el-col-' + (fieldSchema.ui.columns * 2 || 24)]"
-          :style="{display: _analyzeVal(fieldSchema.ui.hidden) ? 'none' : ''}"
           class="el-col el-form-item">
         <template>
           <label v-if="!fieldSchema.ui.noLabelSpace" :style="{'visibility': fieldSchema.ui.showLabel ? 'visible' : 'hidden', width: mergeConfig.labelWidth}"  class="el-form-item__label">
@@ -172,6 +170,21 @@ export default {
       default: true
     }
   },
+  computed: {
+    filteredPropreties() {
+      const { properties } = this.schema
+      return Object.keys(properties).reduce((result, curkey) => {
+        const curval = properties[curkey]
+        const hidden = this._analyzeVal(curval.ui.hidden)
+
+        if (!hidden) {
+          result[curkey] = curval
+        }
+
+        return result
+      }, {})
+    }
+  },
   methods: {
     legendEnable(fieldSchema) {
       return fieldSchema.ui && fieldSchema.ui.showLegend && fieldSchema.ui.legend;

diff --git a/packages/ncform/src/components/vue-ncform/layout-comps/object.vue b/packages/ncform/src/components/vue-ncform/layout-comps/object.vue
@@ -4,10 +4,9 @@
 
     <!-- 垂直布局，即label上，control下 -->
     <div v-if="mergeConfig.layout === 'v'" v-show="!collapsed" class="form-row v-layout" style="width: 100%">
-      <div v-for="(fieldSchema, field) in schema.properties"
+      <div v-for="(fieldSchema, field) in filteredPropreties"
           :key="field"
           :class="['col-md-' + (fieldSchema.ui.columns || 12)]"
-          :style="{display: _analyzeVal(fieldSchema.ui.hidden) ? 'none' : ''}"
           class="form-group">
         <template>
             <label v-if="!legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace" :style="{'visibility': fieldSchema.ui.showLabel ? 'visible' : 'hidden'}">
@@ -32,10 +31,9 @@
 
     <!-- 水平布局，即label左，control右 -->
     <div v-if="mergeConfig.layout === 'h'" v-show="!collapsed" class="form-row h-layout" style="width: 100%">
-      <div v-for="(fieldSchema, field) in schema.properties"
+      <div v-for="(fieldSchema, field) in filteredPropreties"
           :key="field"
           :class="['col-md-' + (fieldSchema.ui.columns || 12)]"
-          :style="{display: _analyzeVal(fieldSchema.ui.hidden) ? 'none' : ''}"
           class="form-group row">
         <template>
           <label v-if="!legendEnable(fieldSchema) && !fieldSchema.ui.noLabelSpace" :style="{'visibility': fieldSchema.ui.showLabel ? 'visible' : 'hidden', width: mergeConfig.labelWidth}" class="col-form-label">
@@ -107,6 +105,21 @@
         default: true
       },
     },
+    computed: {
+      filteredPropreties() {
+        const { properties } = this.schema
+        return Object.keys(properties).reduce((result, curkey) => {
+          const curval = properties[curkey]
+          const hidden = this._analyzeVal(curval.ui.hidden)
+
+          if (!hidden) {
+            result[curkey] = curval
+          }
+
+          return result
+        }, {})
+      }
+    },
     methods: {
       legendEnable(fieldSchema) {
         return fieldSchema.ui && fieldSchema.ui.showLegend && fieldSchema.ui.legend;