vue + element associated with a list of how to set click to enter the corresponding details

1. As shown to achieve the function:

2.
List (1) element is
here one pair <template slot-scope="scope">of explanation, do not understand can look 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>

Click here I only write this column details
the key click the link problem is that this XXX, to obtain background data
XXX depends on your background json format
do not understand I can refer to this form of background data connection (https: // blog.csdn.net/ShangMY97/article/details/103162168)
(2) Here is the click event

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

(3) details page

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

Note that the * 详情页面Visible* Data page in the list () {return the default return value is 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'Details of the background data in the data corresponding to the list page, namewe get to the click event list page corresponding data