直播app源码，弹窗形式实现页面内点击进入详情

直播app源码，弹窗形式实现页面内点击进入详情

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>

 

以上就是直播app源码，弹窗形式实现页面内点击进入详情， 更多内容欢迎关注之后的文章