深圳市手机网站建设建立免费个人网站

在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-plus

2. 引入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来管理数据状态，并通过点击事件来控制弹窗的显示和数据的传递。这种方式使得主子表的交互变得简单而直观。你可以根据需要调整样式和功能。