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, name
we get to the click event list page corresponding data