【Vue3.0实战逐步深入系列】为问卷列表添加查看详情及删除记录功能

本文链接：https://blog.csdn.net/lixiaosenlin/article/details/121537616

本文介绍了如何在Vue3.0应用中为问卷列表添加查看详情和删除记录功能。改造包括：自定义列表列实现标题跳转详情页，添加删除按钮并使用el-popconfirm组件确认删除，改造路由以路径传参，更新结果页以获取和展示问卷详情，以及在API中新增获取详情和删除记录的方法。文章详细讲解了每个改造步骤和关键代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

Hello，小伙伴们大家好。我们继续来完善问卷调查功能。今天依然还是从问卷提交记录页面上做文章。前面的分享中我们已经实现了提交记录的列表展示功能，但仅仅一个列表展示还是不够的，因为列表中无法显示更多的信息（比如问卷详情）。下面我们就基于列表实现一个点击标题跳转到问卷详情页（结果页）和删除问卷的功能。

列表页改造

先来看看我们列表页要增加的功能：

点击标题跳转到详情页

点击某条记录实现删除问卷

基于以上两点我们就知道该从何下手了

首先将标题列修改为自定义列（具体可参考elementui官方示例），在自定义列中添加一个router-link标签，用于实现跳转

在列表的尾部新增一个自定义列，并在该列中添加一个删除按钮，当点击删除时先提示“是否确认操作”，用户确认后将记录删除

删除按钮我们依然使用elementui的el-button按钮，type为“danger”， circle为true，icon为“DeleteFilled”

删除前需要先确认是否删除，这里使用el-popconfirm确认框组件并绑定confirm确认事件，该组件需嵌套在el-button的外部

在JavaScript代码中导入ElButton，ElPopConfirm和ElMessage三个组件并注册

在setup方法中定义一个deleteHistory方法接收一个id作为参数，在该方法中调用api中deleteHistory方法实现删除操作

改造后的代码如下：

<template>
	<el-table :data="data" stripe border style="width:100%">
		<el-table-column prop="id" label="Id" width="50" />
		<el-table-column prop="title" label="Title"><!--改为自定义列-->
			<template #default="scope">
				<router-link :to="'/result/'+scope.row.id">{
  {scope.row.title}}</router-link>
			</template>
		</el-table-column>