• 最近寫需求時用到了expand-change表格展開回調，但我發現第一次展開后并沒有展示任何數據，但我的返回值是存在的，當第二次展開時發現數據就有了。此原因是因為獲取數據的接口是異步的，導致Dom渲染不同步導致的，其實解決辦法也很簡單，只需在外層的表格列表中的每一個數組對象加一個空數據作為默認展示即可

1 . 解決expand-change第一次展開無數據顯示問題

• 首先：定義好需要展示的數據并設置type="expand"展開子表格，用expand-change來獲取當前行展開回調，設置row-key防止數據混亂（這個要加上不然，展開行又自己合上了）

<template><el-table :data="tableData" @expand-change="handleExpand" :border="parentBorder" style="width: 100%"><el-table-column type="expand"><template #default="props"><div m="4"><p m="t-0 b-2">State: {{ props.row.number || '' }}</p><p m="t-0 b-2">City: {{ props.row.chargeTime || '' }}</p><p m="t-0 b-2">Address: {{ props.row.serverAmount|| '' }}</p><h3>Family</h3><el-table :data="props.row.family" :border="childBorder"><el-table-column label="Name" prop="name" /><el-table-column label="State" prop="state" /><el-table-column label="City" prop="city" /><el-table-column label="Address" prop="address" /><el-table-column label="Zip" prop="zip" /></el-table></div></template></el-table-column><el-table-column label="Date" prop="date" /><el-table-column label="Name" prop="name" /></el-table>
</template><script lang="ts" setup>
import { ref } from 'vue'const parentBorder = ref(false)
const childBorder = ref(false)
const tableData = [{date: '2016-05-03',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',},{date: '2016-05-02',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',},{date: '2016-05-04',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',},
]// 展開某行詳情
const handleExpand = async (item, expandedRows) => {if (!item.expand) {const detail = await api.front.remoteConfig.getBillDetail({ number: item.number })item.number = detail.numberitem.chargeTime = detail.chargeTimeitem.serverAmount = detail.serverAmountitem.expand = true}
}
</script>