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