当前位置：代码网 > it编程>编程语言>Javascript > Vue3的el-table-column增加跳转其他页面的方法

Vue3的el-table-column增加跳转其他页面的方法

2025年02月13日 • Javascript •我要评论

效果图既不影响显示内容，也不影响页面跳转el-table-column写法<el-table-column label="系统单号" align="center" prop="system

效果图

既不影响显示内容，也不影响页面跳转

el-table-column写法

<el-table-column
  label="系统单号"
  align="center"
  prop="systematicreceipt"
  width="180"
>
  <template #default="scope">
    <el-link type="primary">
      <a target="_blank" @click="handleupdate(scope.row)">{{
        scope.row.systematicreceipt
      }}</a>
    </el-link>
  </template>
</el-table-column>

handleupdate方法

function handleupdate(row) {
  const systematicreceipt = row.systematicreceipt;
  router.push({
    path: "/purchase/purchasedocumentprocessing",
    query: { systematicreceipt },
  });
}

源码分析

可参考铠思进销存系统的ks-vue3/src/views/system/purchase/purchasedocumentquery.vue

到此这篇关于vue3的el-table-column增加跳转其他页面的文章就介绍到这了,更多相关vue3 el-table-column跳转其他页面内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

JS实现点击图片放大缩小及拖拽功能

前言本文使用 vue创建一个可拖拽和缩放的图片查看器组件，该组件不仅可以展示图片，还支持用户通过鼠标拖动和缩放来查看细节。本文将介绍如何封装一个简单的图片拖拽与... [阅读全文]
React实现一个支持动态插槽的Layout组件

目标实现一个支持动态注册内容的插槽组件，思路：提供一个 context，维护插槽中注册的内容，并将其渲染到对应的位置。思路采用 context 实现插槽的注册和... [阅读全文]
vue的watch监听器取消的方法小结

1.使用this.$watch创建的监听器如果你是通过this.$watch动态创建的监听器，this.$watch会返回一个取消监听的函数，调用该函数即可取消... [阅读全文]
使用React路由实现页面导航的示例代码

什么是react router？react router是一个用于react应用程序的标准路由库，它允许你在单页面应用程序（spa）中快速、简单地实现路由功能。... [阅读全文]
JS 的继承方式与使用场景对比分析

在 javascript 中，继承的实现方式主要有以下几种，每种方式适用于不同的场景：一、原型链继承实现方式：function parent() { this.... [阅读全文]
在Vue3中使 echarts 图表宽度自适应变化的操作方法

需求：有现在这样一段使用 echarts 的 vue3 代码：<template> <div ref="chartref" style="width: 600p…

2025年02月13日 • 编程语言