功能:点击表格中的数据,跳转新页面,并根据当前数据行查询详细信息
具体实现:使用<template>标签
一、在表格中添加template和router标签
slot-scope="scope" scope中储存当前表格行所有数据 可以使用scope.row.xxxx获取本行数据的某一属性
router-link中 :to="xxxx" 与下面的router.js设置跳转路径相对应
span中可以使用{{scope.row.xxxx}}填写动态数据 但是可能会造成刷新页面错误 原因未知
<el-table-column label="异常代码" align="center">
<template slot-scope="scope">
<router-link :to="'/systemgateway/type/error/' + scope.row.gatewayId" class="link-type">
<span>异常代码</span>
</router-link>
</template>
</el-table-column>
二、配置路由文件router
在src下有router文件夹 ,打开其中的index.js配置路径
在公共路由constantRoutes中添加如下代码
path 路由路径
children: path :路由路径
component: 指向文件地址
name:路由名称
meta: {标题,图标}
{
path: '/systemgateway',
component: Layout,
hidden: true,
children: [
{
path: 'type/error/:gatewayId(\\d+)',
component: (resolve) => require(['@/views/basic/systemgateway/error'], resolve),
name: 'Gatewayerror',
meta: { title: '异常代码', icon: '' }
}
]
}