vue+element怎么设置列表关联点击进入对应详情

最新推荐文章于 2023-01-16 21:15:29 发布

青椒切小块

最新推荐文章于 2023-01-16 21:15:29 发布

阅读量1.1k

点赞数

分类专栏： element-ui vue

本文链接：https://blog.csdn.net/ShangMY97/article/details/103274950

版权

vue 同时被 2 个专栏收录

47 篇文章

订阅专栏

element-ui

5 篇文章

订阅专栏

本文介绍如何使用Vue和Element UI组件库，实现列表点击后跳转到对应的详情页面。关键在于理解后台数据结构并正确设置点击事件。通过在列表页中设置点击事件，传递所需数据到详情页展示。

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

1.如图所示是要实现的功能：
在这里插入图片描述
2.
（1）element的列表
这里有一个对<template slot-scope="scope">的解释，不理解的可以看一下https://blog.csdn.net/tg928600774/article/details/81945140?utm_source=blogxgwz1

 <el-table-column label="详情" width="180">
      <template slot-scope="scope">
       <el-button type="text"  size="small" @click="handleView(scope.row.XXX)">详情</el-button>
          </template>
      </template>
    </el-table-column>

这里我就只写点击详情这一列
点击连接问题的关键就在于这个XXX，获取后台的数据
XXX要看你的后台json的格式
不太理解可以参考我这篇表格连接后台数据的(https://blog.csdn.net/ShangMY97/article/details/103162168)
（2）下面是这个点击事件

handleView (name) {
        this.详情页面Visible = true
        this.$nextTick(() => {
          this.$refs.详情页面ViewDialog.initXqDialog(name)
        })
      }

(3)详情页中

initXqDialog(name){
        this.get详情Data(name)
        this.详情页面Visible = true  
}

注意这个*详情页面Visible*在列表页中的data(){return中默认的返回值是false

get详情Data(name){
 	this.$http({
           url: this.$http.adornUrl('详情数据连接'),
           method: 'get',
           params: this.$http.adornParams({
					'name'=name
			})
    }).then(({data}) => {
    	console.log(JSON.stringify(data))
	}）
}

'name'是详情后台数据中与列表页对应的数据，name是我们在点击事件中获取到的列表页对应的数据