element-plus+vue3+vue-router实现点击某字段跳转到另一个页面

最新推荐文章于 2025-03-07 10:36:13 发布

半残，还能抢救一下

最新推荐文章于 2025-03-07 10:36:13 发布

阅读量1.6k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_42410741/article/details/120292190

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Vue.js中的表格组件用法，通过`el-table`展示数据，并利用`v-slot`在表格列中创建动态路由链接。用户点击用户名时，将跳转至`AuthorVideosList`页面，传递当前作者的ID。示例展示了前端路由的基本操作以及UI设计思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div id="app">

            <el-table :data="auList"  border style="width: 100%">
                <el-table-column prop="shortId" label="ID" width="180"> </el-table-column>
                <el-table-column prop="nickname" label="用户名" width="180">
                    <template v-slot="scope">
                        <router-link :to="{path:'/AuthorVideosList/'+scope.row.shortId}" >{{scope.row.nickname}}</router-link>
                    </template>


                </el-table-column>
            </el-table>
    </div>

路由和ui基本操作。
如何在column获取到当前object？

 <template v-slot="scope">
                        <router-link :to="{path:'/AuthorVideosList/'+scope.row.shortId}" >{{scope.row.nickname}}</router-link>
</template>

在scope.row中可以获取到数组中的当前对象