Merge pull request #837 from vusion/fix-v3.3x-tree-select

Fix v3.3x tree select
vusion · Mar 18, 2024 · ec36c64 · ec36c64
2 parents 7fc745e + 3218b07
commit ec36c64
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cloud-ui.vusion",
   "description": "Vusion Cloud UI",
-  "version": "0.18.15",
+  "version": "0.18.17",
   "author": "Forrest <[email protected]>",
   "contributors": [
     "haoxutong <[email protected]>",

diff --git a/src/components/u-tree-select-new.vue/api.yaml b/src/components/u-tree-select-new.vue/api.yaml
@@ -122,6 +122,14 @@
       brifeDoc: ""
       docDescription: 开启后支持清除按钮。默认关闭
       tooltipLink: ""
+    - name: render-optimize
+      title: 只渲染激活节点
+      type: boolean
+      default: false
+      description: 设置只渲染tree激活子节点，用于渲染性能提升。
+      group: 交互属性
+      brifeDoc: ""
+      docDescription: 开启后只渲染激活节点，默认关闭。
     - name: append-to
       title: 弹出层位置依据
       type: string

diff --git a/src/components/u-tree-select-new.vue/index.vue b/src/components/u-tree-select-new.vue/index.vue
@@ -84,6 +84,7 @@
             :style="getPopperStyle()">
             <!-- 目前只支持单选 -->
             <u-tree-view-new v-if="popperOpened" ref="treeView"
+                :renderOptimize="renderOptimize"
                 :if-expanded="ifExpanded"
                 style="border: none; min-width: 100%; display: inline-block"
                 :value="value"
@@ -187,6 +188,7 @@ export default {
         },
         filterFields: { type: Array, default: () => ['text'] },
         ifExpanded: { type: Boolean, default: false },
+        renderOptimize: { type: Boolean, default: false },
     },
     data() {
         return {

diff --git a/src/components/u-tree-view-new.vue/index.vue b/src/components/u-tree-view-new.vue/index.vue
@@ -2,7 +2,9 @@
 <div :class="$style.root" :readonly="readonly" :readonly-mode="readonlyMode" :disabled="disabled">
     <u-loading v-if="loading" size="small"></u-loading>
     <template v-else-if="currentDataSource">
-        <u-tree-view-node-new v-if="dataSource"
+        <u-tree-view-node-new
+            :render-optimize="renderOptimize"
+            v-if="dataSource"
             v-for="(node, index) in currentDataSource.data"
             :text="$at2(node, field || textField)"
             :value="$at2(node, valueField)"
@@ -75,6 +77,7 @@ export default {
         filterFields: { type: Array, default: () => ['text'] },
         draggable: { type: Boolean, default: false },
         subBackground: { type: Boolean, default: false },
+        renderOptimize: { type: Boolean, default: false },
     },
     data() {
         return {

diff --git a/src/components/u-tree-view-new.vue/node.vue b/src/components/u-tree-view-new.vue/node.vue
@@ -50,7 +50,7 @@
             </span>
         </div>
     </div>
-    <div :class="$style.sub" v-if="rootVM.ifExpanded && !childrenRendered && node && !node.childrenRendered ? currentExpanded : true" v-show="currentExpanded">
+    <div :class="$style.sub" v-if="childrenNodeRenderedIf" v-show="childrenNodeRenderedShow">
         <template v-if="node && $at(node, currentChildrenField) && !rootVM.excludeFields.includes(currentChildrenField)">
             <u-tree-view-node-new
                 v-for="(subNode, subNodeIndex) in $at(node, currentChildrenField)"
@@ -65,6 +65,7 @@
                 :parent="node"
                 :level="level + 1"
                 :draggable="subNode.draggable"
+                :renderOptimize="renderOptimize"
             >
                <template #item="item">
                    <slot name="item" v-bind="item">
@@ -87,6 +88,7 @@
                     :parent="node"
                     :level="level + 1"
                     :draggable="subNode.draggable"
+                    :renderOptimize="renderOptimize"
                 >
                     <template #item="item">
                         <slot name="item" v-bind="item">
@@ -130,6 +132,7 @@ export default {
         } },
         draggable: { type: Boolean, default: false },
         dragExpanderDelay: { type: Number, default: 1500 },
+        renderOptimize: { type: Boolean, default: false },
     },
     data() {
         return {
@@ -233,6 +236,13 @@ export default {
         paddingLeft() {
             return this.rootVM && this.rootVM.paddingLeft || 0;
         },
+        childrenNodeRenderedIf() {
+            const childrenExist = this.rootVM.ifExpanded && !this.childrenRendered && this.node && !this.node.childrenRendered ? this.currentExpanded : true
+            return this.renderOptimize ? childrenExist && this.currentExpanded : childrenExist
+        },
+        childrenNodeRenderedShow() {
+            return this.renderOptimize ? true : this.currentExpanded
+        },
     },
 
     watch: {