hookehuyr

fix 树形组件显示高度调整

<!--
* @Date: 2022-08-29 14:31:20
* @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
* @Description: 树形组件
-->
......@@ -61,8 +61,9 @@
<van-tab title="成员" :name="2"></van-tab>
</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
id="deptTree"
ref="deptTreeRef"
v-model="select_dept_value"
checkable
......@@ -74,13 +75,13 @@
:cascade="false"
:defaultExpandAll="false"
@checked-change="deptTreeCheckedChange"
style=" height: 55vh; overflow: scroll;"
style=" height: 60vh; overflow: scroll;"
>
<span slot="empty">暂无数据</span>
</Vtree>
</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
v-model="role_checked"
@change="roleChangeMethod"
......@@ -95,12 +96,14 @@
style="margin-bottom: 0.5rem;"
>{{ role.name }}</van-checkbox>
</van-checkbox-group>
<div style="height: 4rem;"></div>
</div>
<div v-if="tabActive === 2" style="padding: 0 0 0 1rem;">
<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
id="userTree"
ref="userTreeRef"
v-model="select_user_value"
selectable
......@@ -198,12 +201,12 @@
</div>
<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-button block type="default" @click="onCancelClick">取消</van-button>
<van-button block round type="default" @click="onCancelClick">取消</van-button>
</van-col>
<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-row>
</div>
......@@ -260,6 +263,12 @@ const openTree = () => {
// 获取已选择的数据
checkedGroup.value = _.cloneDeep(emitCheckedGroup.value);
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 === '成员') {
userListReset();
// 树形结构底部高度可视度
if (!$('#userTree').find('.tree-placeholder').length) {
$('#userTree').find('.ctree-tree__block-area').append('<div class="tree-placeholder" style="height: 4rem;"></div>');
}
}
});
};
......