主组件： 左侧部门树 <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
  }
}