现在有一个需求是点击页面内的详情按钮后进行跳转到详情页,左侧导航栏不可点击,以弹窗的形式展示。具体步骤如下:
1、添加路由,在router/index.js中添加详情页路由
{
path: '/exhibition',
component: Layout,
meta: { title: '展览管理', icon: 'theme', roles: [1, 2] },
children: [
{
path: 'index',
component: () => import('@/views/exhibition/index'),
name: 'exhibition',
meta: { title: '列表页', icon: 'theme', roles: [1, 2] },
}
]
}
2、列表页中添加点击事件,exhibition/index.vue
<template>
<div class="app-container">
<el-table :data="list" style="width: 100%">
<el-table-column label="操作" min-width="100">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
编辑
</el-button>
</template>
</el-table-column>
</el-table>
<el-drawer :title="dialogStatus" :visible.sync="dialogFormVisible" :close-on-press-escape="false" :wrapper-closable="false" size="80%">
<addExh ref="addExh" @on-close="dialogFormVisible=false" />
</el-drawer>
</div>
</template>
<script>
import addExh from './add.vue'
export default {
components: {addExh},
methods: {
handleUpdate(row) {
this.dialogStatus = '展览编辑'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs.addExh.resetTemp(row.id)
})
},
}
}
</script>
3、编辑页中添加编辑逻辑,exhibition/add.vue
<template>
<div class="app-container">
编辑页相关页面逻辑
</div>
</template>
<script>
import addExh from './add.vue'
export default {
components: {addExh},
methods: {
resetTemp(id) {
// id:列表页中传递过来的参数
},
}
}
</script>
ps:通过路由方式进入详情,请参考《页面内点击进入详情(路由形式)》