老师，问你个组件逻辑拆分的问题；
主组件： 左侧部门树 <left-tree></left-tree> 右侧表格 <right-table></right-table>
功能： 点击左侧树节点，刷新右侧表格数据
主要问题：
左侧树业务逻辑 departmentLeftTree.js 通过 watch 监测到 defaultSelectedKeys变化，需要调用 右侧表格业务逻辑 departmentTable.js 中的 getDeptList()方法，已经调用成功，并且给departmentTable.js 中的 const tableData = ref([]); 赋值，但是 tableData 的改变不会 让页面的列表数据刷新，麻烦老师给看一下，是什么问题？
watch(defaultSelectedKeys, async() => {
console.log('检测到defaultSelectedKeys变化了')
await getDeptList(defaultSelectedKeys.value);
})
主组件 【 department.vue】
<template>
<a-layout>
<!-- 左侧部门树 -->
<a-layout-sider>
<left-tree></left-tree>
</a-layout-sider>
<!-- 右侧表格 -->
<a-layout>
<a-layout-content>
<a-form layout="inline" style="margin: 10px 10px 0px 20px">
<a-form-item>
<a-input size="small" placeholder="请输入关键字">
<template #prefix
><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
/></template>
</a-input>
</a-form-item>
<a-form-item style="padding-left: 5px">
<a-button size="small" type="primary" html-type="submit">
<template #icon><SearchOutlined /></template>查询
</a-button>
</a-form-item>
<a-form-item>
<a-button size="small" type="primary" @click="editTree('', '0')">
<template #icon><PlusOutlined /></template>新增
</a-button>
</a-form-item>
</a-form>
<!-- 表格 -->
<right-table></right-table>
</a-layout-content>
</a-layout>
</a-layout>
</template>
<script>
import {
defineComponent,
ref,
getCurrentInstance,
onMounted,
nextTick,
} from "vue";
import {
CarryOutOutlined,
FormOutlined,
SearchOutlined,
} from "@ant-design/icons-vue";
import LeftTree from "@/views/system/department/LeftTree";
import RightTable from "@/views/system/department/RightTable";
export default defineComponent({
components: {
CarryOutOutlined,
FormOutlined,
LeftTree,
RightTable
},
setup() {
},
});
</script>
<style lang="scss" scoped></style>左侧树组件【LeftTree.vue】
<template>
<a-tree
v-if="leftTreeData.length"
defaultExpandAll
:show-line="showLine"
:show-icon="showIcon"
@select="onSelect"
:treeData="leftTreeData"
@load="loads"
:replaceFields="replaceFields"
:defaultSelectedKeys="defaultSelectedKeys"
></a-tree>
</template>
<script>
import { defineComponent, ref, onMounted ,watch } from "vue";
import departmentApi from '@/composables/deaprtment/departmentApi'
//left-tree业务逻辑
import departmentLeftTree from '@/composables/deaprtment/departmentLeftTree'
export default defineComponent({
setup() {
const {
showLine,
showIcon,
defaultSelectedKeys,
onSelect,
onLoadSuccess,
leftTreeData,
replaceFields,
defaultExpandAll,
} = departmentLeftTree();
return {
showLine, //是否展示连接线
showIcon, //是否展示图标
defaultSelectedKeys, //默认选中的节点
onSelect, //部门节点点击事件
onLoadSuccess, //树节点加载完毕时触发
leftTreeData, //左侧部门数据
replaceFields, //树节点替换字段
defaultExpandAll,
};
}
});
</script>
<style scoped>
</style>
左侧树组件业务逻辑【departmentLeftTree.js】
// 部门管理左侧树相关
import { ref, onMounted ,watch} from 'vue';
import departmentApi from '@/composables/deaprtment/departmentApi'
import departmentTable from '@/composables/deaprtment/departmentTable'
export default function departmentLeftTree() {
const { getLeftDepartmentTree } = departmentApi();
const { getDeptList } = departmentTable();
//是否展示连接线
const showLine = ref(true);
//是否展示图标
const showIcon = ref(false);
const defaultExpandAll = ref(true);
//默认选中的节点
const defaultSelectedKeys = ref([]);
//节点属性替换字段
const replaceFields = { children: "children", title: "name", key: "id" };
//节点点击事件
const onSelect = (selectedKeys, info) => {
//此方法里面，点击节点的时候，需要根据当前节点的id查询右边的表格列表
};
//获取左侧树数据
const leftTreeData = ref([]);
onMounted(
async() => {
let {data:res} = await getLeftDepartmentTree();
if(res.code == 200){
leftTreeData.value = res.data;
let datas = res.data;
var ids = new Array();
ids.push(datas[0].id)
defaultSelectedKeys.value = ids;
}
}
)
watch(defaultSelectedKeys, async() => {
console.log('检测到defaultSelectedKeys变化了')
await getDeptList(defaultSelectedKeys.value);
})
return {
showLine, //是否展示连接线
showIcon, //是否展示图标
defaultSelectedKeys, //默认选中的节点
onSelect, //部门节点点击事件
leftTreeData ,//左侧部门数据
replaceFields, //树节点替换字段
defaultExpandAll
}
}右侧表格组件【RightTable.vue】
<template>
<a-table
:scroll="{ y: tableHeight }"
bordered="true"
style="margin: 10px"
:columns="tableColums"
:data-source="tableData"
:pagination="false"
childrenColumnName="child"
:rowKey="
(record, index) => {
return index;
}
"
>
<template #name="{ text }">
<a>{{ text }}</a>
</template>
</a-table>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import departmentApi from "@/composables/deaprtment/departmentApi";
import departmentTable from "@/composables/deaprtment/departmentTable";
export default defineComponent({
setup() {
const {
showLine,
showIcon,
onSelect,
leftTreeData,
defaultExpandAll,
replaceFields,
defaultSelectedKeys,
onLoadSuccess,
tableColums,
tableData,
tableHeight,
loads
} = departmentTable();
return {
showLine,
showIcon,
onSelect,
leftTreeData,
defaultExpandAll,
replaceFields,
defaultSelectedKeys,
onLoadSuccess,
tableColums,
tableData,
tableHeight,
loads
};
},
});
</script>
<style scoped>
</style>右侧表格业务逻辑 【departmentTable.js】
import { ref, onMounted } from 'vue'
import departmentApi from '@/composables/deaprtment/departmentApi'
export default function departmentTable() {
const { getRightTableList } = departmentApi();
//表头
const tableColums = ref([
{
title: "部门名称",
dataIndex: "name",
key: "name",
width: 150,
},
{
title: "部门经理",
dataIndex: "manager",
key: "manager",
width: 150,
},
{
title: "部门编码",
dataIndex: "deptCode",
key: "deptCode",
width: 150,
},
{
title: "部门地址",
dataIndex: "deptAddress",
key: "deptAddress",
width: 150,
},
{
title: "部门电话",
dataIndex: "deptPhone",
key: "deptPhone",
width: 150,
}
]);
const tableData = ref([]);
onMounted(
//获取右侧部门列表
async () => {
}
)
//获取部门列表
const getDeptList = async (parentId) =>{
let { data: res } = await getRightTableList(parentId);
if (res.code == 200) {
tableData.value = res.data;
}
}
return {
tableData,
tableColums,
getDeptList
}
}693
收起
正在回答 回答被采纳积分+3
1回答
相似问题
登录后可查看更多问答，登录/注册
