1. 源页面
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="gotoXiongshangdetail(scope.row.xlsxId)"
v-hasPermi="['reportForm:xiongshangdetail:detail']"
>详情</el-button>
gotoXiongshangdetail(xlsxId) {
this.$router.push({ name: "Xiongshangdetail", params: {detailId: xlsxId } });
console.log(xlsxId);
},
2. router/index.js
{
path: '/index',
component: Layout,
hidden: true,
permissions: ['reportForm:xiongshangdetail:detail'],
children: [
{
path: 'xiongshangdetail/:detailId',
component: () => import('@/views/reportForm/xiongshangdetail/'),
name: 'Xiongshangdetail',
meta: { title: '详细信息', activeMenu: '/xiongshangdetail' }
}
]
},
3. 目标页面
export default {
name: "Xiongshangdetail",
data() {
return {
detailId:null,
// 遮罩层
loading: true,
// 总条数
total: 0,
// 详情表格数据
xiongshangdetailList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
mileage: null,
pierId: null,
area: null,
detailId: this.$route.params.detailId,
},
};
},
created() {
console.log("Received xlsxId:", this.$route.params.xlsxId); // 添加日志
this.detailId = this.$route.params.detailId;
this.getList(this.detailId);
},
onLoad(option) {
this.getDetailList(option.id)
},
methods: {
/** 根据传过来的ID查询详情列表 */
getList(detailId) {
this.loading = true;
console.log("detailId:",detailId);
listXiongshangdetail(detailId).then(response => {
this.xiongshangdetailList = response.rows;
this.total = response.total;
this.loading = false;
console.log(response);
}).catch(error =>{
this.loading = false;
console.error("Error fetching data:", error);
})
},