vue下给table表格里某一行,某一列加链接,实现页内跳转
vue下给table表格里某一行,某一列加链接,实现页内跳转在vue项目中,往往会遇到这样的情况,就是要实现在table表格中,点击其中一行或者某一列跳转到下个页面,然后将这一条的相关数据带到下个页面中显示,无论点其中一行或者某一列都是跳到相同的页面,只是填的数据不一样,这个时候就需要实现跳转的时候一起把参数携带过去。点击某一行实现跳转给table添加点击事件<el-table...
·
在vue项目中,往往会遇到这样的情况,就是要实现在table表格中,点击其中某一行或者某一列跳转到下个页面
点击某一行实现跳转
给table添加点击事件
<el-table
:data=" capitalData"
style="width: 100%"
:header-cell-style="table.styleObj"
:stripe="table.stripe"
@selection-change="handleSelectionChange"
@row-click="openDialog"
>
</el-table
在methods里面添加方法,此时的跳转页面需要是加载在router里面的,
openDialog() {
this.$router.replace({
path: `/orderDetail`,
query: {pageNum: this.pageNum}
});
},
点击某一列实现跳转
<el-table-column prop="orderId" label="关联订单" >
<template slot-scope="scope">
<router-link tag="a" :to="{path:'/orderDetail',query:{id:scope.row.orderId}}">{{ scope.row.orderId}}</router-link>
</template>
</el-table-column>
更多推荐
已为社区贡献1条内容
所有评论(0)