实现两个学生信息表的删除与查看功能 封装表格组件，实现操作列表中的“删除”与“查看”，利用插槽。 点击查看，以弹窗形式显示具体学生信息（包括姓名与年纪）。

### 创建可重用的学生信息表格组件 为了创建一个具有删除和查看详情功能的 Vue.js 表格组件，可以通过定义一个自定义组件来实现这一目标。此组件将利用插槽（slot）机制展示详细信息，并提供事件处理程序用于触发操作。 #### 组件结构设计 首先，构建 `StudentTable` 组件，它接受一组学生数据作为属性并呈现为表格形式： ```html <template> <table border="1"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年级</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(student, index) in students" :key="index"> <td>{{ student.id }}</td> <td>{{ student.name }}</td> <td>{{ student.grade }}</td> <td> <!-- 查看详情按钮 --> <button @click="showDetail(student)">查看详情</button> <!-- 删除按钮 --> <button @click="$emit('delete', student.id)">删除</button> </td> </tr> </tbody> </table> <!-- 使用具名插槽显示详细信息 --> <div v-if="selectedStudent"> <slot name="detail" :student="selectedStudent"></slot> </div> </template> <script> export default { props: ['students'], data() { return { selectedStudent: null, }; }, methods: { showDetail(student) { this.selectedStudent = student; } } }; </script> ``` 上述代码展示了如何创建一个名为 `StudentTable` 的 Vue 组件[^1]。该组件接收一个 `students` 属性列表，并通过循环遍历这些记录以填充表格行。对于每一行，提供了两个按钮：“查看详情” 和 “删除”。 当用户点击“查看详情”时，会调用方法 `showDetail()` 并传递当前选中的学生对象给父级作用域；而点击“删除”则发出带有参数 `$event` 的自定义事件通知外部监听者执行相应的业务逻辑。 此外，还实现了具名插槽 `<slot>` 来支持更灵活的内容定制化需求——这里用来动态加载被点击查看的具体学员资料卡片[^3]。 #### 父组件集成与交互 接下来，在父组件中引入刚刚创建好的子组件，并为其配置必要的行为响应以及样式调整等细节工作： ```html <div id="app"> <h2>学生信息表</h2> <!-- 调用 StudentTable 子组件 --> <student-table :students="studentsList" @delete="handleDelete"> <!-- 插入具体查看内容模板 --> <template slot="detail" scope="{ student }"> <dialog open v-if="currentViewing === student.id"> <p><strong>姓名:</strong> {{ student.name }}</p> <p><strong>年级:</strong> {{ student.grade }}</p> <button @click="closeDialog">关闭</button> </dialog> </template> </student-table> </div> ``` 在此部分，除了正常传参外，特别注意到了对 `@delete` 自定义事件处理器进行了绑定以便于后续处理实际的数据变更请求。同时，也完成了对学生个人档案对话框样式的简单布局描述。 最后，还需补充一些 JavaScript 代码片段完成整个页面的功能闭环： ```javascript new Vue({ el: '#app', components: { 'student-table': StudentTable }, // 注册局部组件 data () { return { currentViewing: null, studentsList: [ {id: 1001,name:'张三',grade:'大一'}, {id: 1002,name:'李四',grade:'大二'} ] } }, methods:{ handleDelete(id){ console.log(`准备移除ID=${id}的学生`); // 实际应用中应向服务器发送HTTP DELETE 请求... // 更新本地状态机模拟删除成功效果 this.studentsList = this.studentsList.filter(item => item.id !== id); }, closeDialog(){ this.currentViewing = null; // 关闭弹窗 } } }); ``` 这段脚本负责初始化根实例并将之前提到过的 `StudentTable` 定义注册成为可用标签之一。除此之外，还定义了一些辅助性的成员变量及函数，比如控制模态窗口可见性的标志位 `currentViewing` ，以及针对特定 ID 执行删除动作的方法 `handleDelete()` 。每当有新的条目加入或旧有的项目遭到剔除之时，都会自动刷新视图使之保持同步更新。