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

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是我们在点击事件中获取到的列表页对应的数据