九、左边控制右边布局解读

bbill

已于 2024-01-19 12:24:56 修改

阅读量811

点赞数 25

分类专栏： vue，jeecgboot，vben前端源码学习前端源码分析文章标签：前端 vue.js node.js jeecgboot

于 2024-01-19 12:19:08 首次发布

本文链接：https://blog.csdn.net/bbill/article/details/135694623

版权

vue，jeecgboot，vben前端源码学习同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

前端源码分析

23 篇文章 0 订阅

订阅专栏

布局功能，左边控制右边数据刷新
在这里插入图片描述

1，主文件：

src\views\system\departUser\index.vue
右边栏文件（部门员工）：src\views\system\departUser\components\DepartUserInfoTab.vue
departUser\index.vue布局：
在这里插入图片描述

2，左边栏文件（部门树）：

src\views\system\departUser\components\DepartTree.vue

storePathTitle /system/depart-user
components/SimpleMenu/src/components/MenuItem.vue:110
查询部门------------loadDepartTreeData
localhost꞉3100/src/views/system/departUser/components/DepartTree.vue?t=1669558794051:20
-----------result:-[object Object]
localhost꞉3100/src/views/system/departUser/components/DepartTree.vue?t=1669558794051:27
部门数据
-------------departuser–onTreeSelect data:{“key”:“c6d7cb4deeac411cb3384b1b31278596”,“value”:“c6d7cb4deeac411cb3384b1b31278596”,“title”:“珠海分公司”,“isLeaf”:false,“id”:“c6d7cb4deeac411cb3384b1b31278596”,“parentId”:null,
查询人员前确认部门ID
--------beforeFetch()-------------departId.value:–c6d7cb4deeac411cb3384b1b31278596
localhost꞉3100/src/views/system/departUser/components/DepartUserInfoTab.vue?t=1669558794051:53

部门人员查询参数
--------departUserList–>-----------params: {“column”:“createTime”,“order”:“desc”,“pageNo”:1,“pageSize”:10,“depId”:“c6d7cb4deeac411cb3384b1b31278596”}
views/system/departUser/depart.user.api.ts:57
--------beforeFetch()-------------departId.value:–c6d7cb4deeac411cb3384b1b31278596
localhost꞉3100/src/views/system/departUser/components/DepartUserInfoTab.vue?t=1669558794051:53
人员查询结果数据
--------departUserList–>-----------params: {“column”:“createTime”,“order”:“desc”,“pageNo”:1,“pageSize”:10,“depId”:“c6d7cb4deeac411cb3384b1b31278596”}

3，右边栏文件（部门员工）：

src\views\system\departUser\components\DepartUserInfoTab.vue
const props = defineProps({-----------------------------定义属性数据，
data: { require: true, type: Object },-------------------data从主页接收右边栏发送的员工数据
});
// 当前选中的部门ID，可能会为空，代表未选择部门
const departId = computed(() => props.data?.id);

4，选择树菜单，控制标签页显示（激活）与变灰（失焦）

在这里插入图片描述
（1）增加
<a-tabs defaultActiveKey=“activeKey” v-model:activeKey=“activeKey”>

const activeKey = ref(‘user-info’);
（2）
// 左侧树选择后触发
function onTreeSelect(data) {
// console.log(‘--------------------data-’+JSON.stringify(data));
//console.log(‘--------------------data key-’+data.key);
//console.log(‘--------------------data leaf-’+data.isLeaf);
departData.value = data; //触发刷新tab子界面

if(data.isLeaf===true){
  activeKey.value= "user-info"; //是叶子节点，触发改变激活所选择tab为当前” user-info”
}else{
  activeKey.value= "base-info"; //不是叶子节点，触发改变激活所选择tab为当前” base-info”
}

}