使用 EleAdminPro 前端框架制作后台管理系统,框架集成:Vue3、Ant Desgin Vue、Vite、TypeScripts,如何实现触发列表的详情的点击事件时携带所点击行的id并跳转到另一个详情页面,且需要点击详情页面的不同标题展示不同内容
时间: 2024-04-08 13:35:34 浏览: 57
要实现触发列表的详情点击事件时携带所点击行的ID并跳转到另一个详情页面,并且根据不同标题展示不同内容,你可以按照以下步骤进行操作:
1. 确保你已经安装了 EleAdminPro 前端框架,并且已经集成了 Vue3、Ant Desgin Vue、Vite、TypeScripts。
2. 在列表页面中,配置一个用于展示详情的链接或按钮。在该链接或按钮的点击事件处理函数中,获取所点击行的ID,并将其作为参数传递给跳转页面。
3. 创建一个详情页面,用于展示不同内容。根据不同标题,可以通过路由参数或其他方式传递标识信息。
4. 在详情页面中,根据传递的标识信息,展示不同的内容。你可以使用条件渲染(`v-if`、`v-show`)、动态组件等方式来实现不同内容的展示。
以下是一个简单的示例代码:
列表页面:
```vue
<template>
<a-table :columns="columns" :data-source="dataSource">
<template #action="{ text, record }">
<a @click="goToDetail(record.id)">Detail</a>
</template>
</a-table>
</template>
<script>
export default {
data() {
return {
dataSource: [
{ id: 1, title: 'Title 1' },
{ id: 2, title: 'Title 2' },
],
columns: [
{ title: 'ID', dataIndex: 'id', key: 'id' },
{ title: 'Title', dataIndex: 'title', key: 'title' },
{
title: 'Action',
key: 'action',
customRender: (text, record) => {
return {
children: this.$scopedSlots.action({ text, record }),
};
},
},
],
};
},
methods: {
goToDetail(id) {
this.$router.push({ name: 'detail', params: { id } });
},
},
};
</script>
```
详情页面:
```vue
<template>
<div>
<h2>{{ title }}</h2>
<div v-if="title === 'Title 1'">
Content for Title 1
</div>
<div v-else-if="title === 'Title 2'">
Content for Title 2
</div>
<div v-else>
Content for Other Titles
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: '',
};
},
created() {
this.title = this.$route.params.title;
},
};
</script>
```
在上述示例中,我们在列表页面的每一行添加了一个详情链接,在点击链接时会调用 `goToDetail` 方法,并将所点击行的ID作为参数传递给跳转页面。在跳转的详情页面中,根据传递的标题参数展示不同的内容。
请注意,上述代码中的路由配置和路由参数的获取需要根据你的具体情况进行调整。
希望以上示例对你有所帮助!
阅读全文