在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>
Logo

前往低代码交流专区

更多推荐