在Vue 3中，實現主子表（主從表）的顯示通常涉及到兩個組件：一個是主表（Master Table），另一個是子表（Detail Table）。我們可以使用el-table組件來實現這一功能。這里，我將通過一個示例來展示如何結合使用Element Plus（一個基于Vue 3的UI庫，類似于Element UI，但專為Vue 3設計）來展示主子表結構。
1. 安裝Element Plus
首先，確保你已經安裝了Element Plus。如果還沒有安裝，可以通過npm或yarn來安裝：
npm install element-plus --save
# 或者
yarn add element-plus2. 引入Element Plus
在你的Vue項目中，引入Element Plus的樣式和組件：
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')3. 創建主子表組件
在你的Vue組件中，你可以使用el-table來創建主表和子表。這里是一個基本的示例：
主表組件 (MasterTable.vue)
<template><el-table :data="masterData" style="width: 100%"><el-table-column prop="name" label="Name"></el-table-column><el-table-column label="Details"><template #default="scope"><el-button @click="showDetails(scope.$index)">Show Details</el-button></template></el-table-column></el-table><el-dialog :visible.sync="dialogVisible" title="Details"><el-table :data="currentDetails" style="width: 100%"><el-table-column prop="detail" label="Detail"></el-table-column></el-table></el-dialog>
</template><script setup>
import { ref } from 'vue';const masterData = ref([{ name: 'Item 1', details: [{ detail: 'Detail 1.1' }, { detail: 'Detail 1.2' }] },{ name: 'Item 2', details: [{ detail: 'Detail 2.1' }, { detail: 'Detail 2.2' }] }
]);
const dialogVisible = ref(false);
const currentDetails = ref([]);function showDetails(index) {dialogVisible.value = true;currentDetails.value = masterData.value[index].details;
}
</script>4. 使用主表組件
在你的父組件或者任何其他地方使用MasterTable組件：
<template><MasterTable/>
</template><script setup>
import MasterTable from './components/MasterTable.vue';
</script>在這個示例中，我們創建了一個主表和一個詳情彈窗。點擊“Show Details”按鈕時，會顯示一個包含詳細信息的子表。我們使用了Vue的ref來管理數據狀態，并通過點擊事件來控制彈窗的顯示和數據的傳遞。這種方式使得主子表的交互變得簡單而直觀。你可以根據需要調整樣式和功能。
