vue下给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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值