vue3结合element-plus使用子组件创建树形table,表格初始数据加载不出来问题

这个问题也是醉了，普通table表格，请求接口数据，正常的props传值，都是没问题的，，

但是

这个树形表格真的是狗血，，父组件通过prop传过来的值就是为空，

如果想渲染

可以加个 watch 或者 watchEffect 监听，当传过来的时候赋值table，这个treeTable的数据加载渲染延时问题是真的狗血

附上代码

parent.vue代码

<template>

<children style="width: 100%;height: 100%;" :table-data="tableData" >

    <template #type="{row}">   /** 表格插槽 自定义表格内容--操作 */
        <el-tag v-if="row.type===0">目录</el-tag>
        <el-tag v-else-if="row.type===1" type="success" >菜单</el-tag>
        <el-tag v-else type="info" >按钮</el-tag>
    </template>
    <template #operation="{row}">
        <el-button @click="editFormFnc(row)" link type="primary" size="small">编辑</el-button>
        <span class="vbSpan" > | </span>
        <el-button  @click="openDelete(row)" link type="primary" size="small">删除</el-button>
    </template>
</children>

</template>

<script lang="ts" setup>

import { reactive, ref, onMounted, toRefs } from 'vue'

import children from '../../components/table/children'

// 表格数据格式
let tableData = reactive({
  tableHeader:[
    {
      label:'菜单名称',
      align:'center',
      value:'name',
    },
    {
      label:'菜单类型',
      align:'center',
      value:'type',
    },
    {
      label:'图标',
      align:'center',
      value:'icon',
    },
    {
      label:'组件',
      align:'center',
      value:'component',
    },
    {
      label:'路由地址',
      align:'center',
      value:'router',
    },
    {
      label:'排序',
      align:'center',
      value:'sort',
    },
    {
      label:'操作',
      align:'center',
      value:'operation',
    }
  ],
  data: []
})

// 获取treeTable表格数据
const getData = async () => {
  const dataRel = await auth.treeTable()

  if (dataRel.code === 200) {

    tableData.data = dataRel.data  ///这个数据类型就和 element-plus 官网提供的一致了
  }
}

</script>

 

children.vue代码

 

<template>
    <div class="car_table" >
        <el-table ref="tableRoleRef" row-key="id" :data="relTableData" stripe style="width: 100%;height: calc(100% - 40px)">
            <el-table-column v-for="(header, Hindex) in tableData.tableHeader"
                             :width="header.width"
                             :align="header.align"
                             :type="header.type"
                             :prop="header.value"
                             :label="header.label"
                             :key="Hindex">
                <template #header>
                    {{header.label}}
                </template>
                <template #default="scope"  v-if="header.type != 'index'">
                    <slot :name="header.value" v-bind="scope" >{{scope.row[header.value]}}</slot>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup >
  import { ref, defineProps, watchEffect } from 'vue'
  import { ElTable } from 'element-plus'
  interface User {
    children?: User[]
  }
  const props = defineProps<{
    tableData: {
      tableHeader:any,
      data: any
    },
  }>()
  const isLoading = ref(true)
  const relTableData: User[] = ref([])
  watchEffect(()=>{
    relTableData.value = props.tableData.data
  })

</script>