Browse Source

TreeSelect组件性能优化:1、render-after-expand属性设置为true;2、shallowRef进行引用类型监听;

songxy 1 year ago
parent
commit
a7c19ed688

+ 0 - 1
client/src/views/OaSystem/components/DistrictTree/index copy.vue

@@ -18,7 +18,6 @@
           :filter-method="filterNodeMethod"
           :props="{ label: 'name', value: 'id' }"
           :data="areaTree.list"
-          :render-after-expand="false"
         />
       </template>
     </el-popover>

+ 0 - 1
client/src/views/OaSystem/components/UserOrgTree/index.vue

@@ -4,7 +4,6 @@
     v-model="receiveUserId"
     :data="allUserList"
     :filter-node-method="filterNodeMethod"
-    :render-after-expand="false"
     placeholder=" "
     filterable
   />

+ 1 - 2
client/src/views/OaSystem/projectCenter/projectBook/deptProject.vue

@@ -20,7 +20,6 @@
             :filter-node-method="filterNodeMethod"
             :props="{ label: 'name' }"
             :data="areaTree"
-            :render-after-expand="false"
           />
         </div>
       </div>
@@ -247,7 +246,7 @@ queryProjectListAjax()
 /**
  * 获取行政区tree结构数据
  */
-const areaTree = ref<Array<any>>()
+const areaTree = shallowRef<Array<any>>()
 const filterNodeMethod = (value, data) => {
   return data.name.includes(value)
 }

+ 1 - 2
client/src/views/OaSystem/projectCenter/projectBook/myProject.vue

@@ -20,7 +20,6 @@
             :filter-node-method="filterNodeMethod"
             :props="{ label: 'name' }"
             :data="areaTree"
-            :render-after-expand="false"
           />
         </div>
       </div>
@@ -247,7 +246,7 @@ queryProjectListAjax()
 /**
  * 获取行政区tree结构数据
  */
-const areaTree = ref<Array<any>>()
+const areaTree = shallowRef<Array<any>>()
 const filterNodeMethod = (value, data) => {
   return data.name.includes(value)
 }

+ 12 - 11
client/src/views/OaSystem/projectCenter/projectBook/projectBook.vue

@@ -12,16 +12,17 @@
       <div class="form">
         <span class="formSpan">行政区:</span>
         <div style="width: 160px">
-          <el-tree-select
-            v-model="queryParams.xzqdm"
-            node-key="id"
-            check-strictly
-            filterable
-            :filter-node-method="filterNodeMethod"
-            :props="{ label: 'name' }"
-            :data="areaTree"
-            :render-after-expand="false"
-          />
+          <keep-alive>
+            <el-tree-select
+              v-model="queryParams.xzqdm"
+              node-key="id"
+              check-strictly
+              filterable
+              :props="{ label: 'name' }"
+              :filter-node-method="filterNodeMethod"
+              :data="areaTree"
+            />
+          </keep-alive>
         </div>
       </div>
       <div class="form">
@@ -240,7 +241,7 @@ queryProjectListAjax()
 /**
  * 获取行政区tree结构数据
  */
-const areaTree = ref<Array<any>>()
+const areaTree = shallowRef<Array<any>>()
 const filterNodeMethod = (value, data) => {
   return data.name.includes(value)
 }

+ 0 - 1
client/src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue

@@ -36,7 +36,6 @@
                 show-checkbox
                 lazy
                 check-on-click-node
-                :render-after-expand="false"
                 :cache-data="areaCache"
               />
             </template>