fix 树形组件显示高度调整

 <!--
 <!--
  * @Date: 2022-08-29 14:31:20
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-03 13:15:47
+ * @LastEditTime: 2024-06-03 18:27:47
  * @FilePath: /data-table/src/components/TreeField/MyComponent.vue
  * @FilePath: /data-table/src/components/TreeField/MyComponent.vue
  * @Description: 树形组件
  * @Description: 树形组件
 -->
 -->
@@ -61,8 +61,9 @@
           <van-tab title="成员" :name="2"></van-tab>
           <van-tab title="成员" :name="2"></van-tab>
         </van-tabs>
         </van-tabs>
 
 
-        <div v-show="tabActive === 0" style="padding: 0 0 1rem 1rem;">
+        <div v-show="tabActive === 0" style="padding: 0 0 0 1rem;">
           <Vtree
           <Vtree
+            id="deptTree"
             ref="deptTreeRef"
             ref="deptTreeRef"
             v-model="select_dept_value"
             v-model="select_dept_value"
             checkable
             checkable
@@ -74,13 +75,13 @@
             :cascade="false"
             :cascade="false"
             :defaultExpandAll="false"
             :defaultExpandAll="false"
             @checked-change="deptTreeCheckedChange"
             @checked-change="deptTreeCheckedChange"
-            style=" height: 55vh; overflow: scroll;"
+            style=" height: 60vh; overflow: scroll;"
           >
           >
             <span slot="empty">暂无数据</span>
             <span slot="empty">暂无数据</span>
           </Vtree>
           </Vtree>
         </div>
         </div>
 
 
-        <div v-if="tabActive === 1" style="padding: 0 0 1rem 1rem;">
+        <div v-if="tabActive === 1" style="padding: 0 0 0 1rem; overflow: scroll; height: 60vh;">
           <van-checkbox-group
           <van-checkbox-group
             v-model="role_checked"
             v-model="role_checked"
             @change="roleChangeMethod"
             @change="roleChangeMethod"
@@ -95,12 +96,14 @@
               style="margin-bottom: 0.5rem;"
               style="margin-bottom: 0.5rem;"
             >{{ role.name }}</van-checkbox>
             >{{ role.name }}</van-checkbox>
           </van-checkbox-group>
           </van-checkbox-group>
+          <div style="height: 4rem;"></div>
         </div>
         </div>
 
 
         <div v-if="tabActive === 2" style="padding: 0 0 0 1rem;">
         <div v-if="tabActive === 2" style="padding: 0 0 0 1rem;">
           <van-row gutter="">
           <van-row gutter="">
-            <van-col span="10" style="border-right: 1px solid #eee; height: 55vh; overflow: scroll;">
+            <van-col span="10" style="border-right: 1px solid #eee; height: 60vh; overflow: scroll;">
               <Vtree
               <Vtree
+                id="userTree"
                 ref="userTreeRef"
                 ref="userTreeRef"
                 v-model="select_user_value"
                 v-model="select_user_value"
                 selectable
                 selectable
@@ -198,12 +201,12 @@
       </div>
       </div>
 
 
       <div style="position: fixed; bottom: 0; left: 0; width: 100%;">
       <div style="position: fixed; bottom: 0; left: 0; width: 100%;">
-        <van-row gutter="0">
+        <van-row gutter="10" style="padding: 0 10px 1rem;">
           <van-col span="12">
           <van-col span="12">
-            <van-button block type="default" @click="onCancelClick">取消</van-button>
+            <van-button block round type="default" @click="onCancelClick">取消</van-button>
           </van-col>
           </van-col>
           <van-col span="12">
           <van-col span="12">
-            <van-button block type="primary" @click="onConfirmClick">确定</van-button>
+            <van-button block round type="primary" @click="onConfirmClick">确定</van-button>
           </van-col>
           </van-col>
         </van-row>
         </van-row>
       </div>
       </div>
@@ -260,6 +263,12 @@ const openTree = () => {
     // 获取已选择的数据
     // 获取已选择的数据
     checkedGroup.value = _.cloneDeep(emitCheckedGroup.value);
     checkedGroup.value = _.cloneDeep(emitCheckedGroup.value);
     syncResultToList(); // 同步勾选状态
     syncResultToList(); // 同步勾选状态
+
+    // 树形结构底部高度可视度
+    if (!$('#deptTree').find('.tree-placeholder').length) {
+      $('#deptTree').find('.ctree-tree__block-area').append('<div class="tree-placeholder" style="height: 4rem;"></div>');
+    }
+
   });
   });
 }
 }
 
 
@@ -397,6 +406,10 @@ const onClickTab = ({ title }) => { // tab点击事件
     }
     }
     if (title === '成员') {
     if (title === '成员') {
       userListReset();
       userListReset();
+      // 树形结构底部高度可视度
+      if (!$('#userTree').find('.tree-placeholder').length) {
+        $('#userTree').find('.ctree-tree__block-area').append('<div class="tree-placeholder" style="height: 4rem;"></div>');
+      }
     }
     }
   });
   });
 };
 };