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

更新时间：2025年02月06日 09:50:02 作者：KrityCat

文章介绍了如何在Vue3的el-table-column中增加跳转其他页面的功能,并提供了示例代码和handleUpdate方法的源码分析,感兴趣的朋友跟随小编一起看看吧

效果图

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

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跳转其他页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue 理解之白话 getter/setter详解
这篇文章主要介绍了Vue getter setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue3 使用v-md-editor如何动态上传图片的方法实现
本文主要介绍了Vue3 使用v-md-editor如何动态上传图片，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue使用v-model实现父子组件传值之子父组件同步更新方式
文章主要介绍了Vue2和Vue3中父子组件间通过props和emit实现双向绑定的方法,Vue2中,子组件通过props接收值,通过$emit触发change事件修改父组件数据；Vue3中方法类似,但语法略有不同
2026-05-05
vue缓存之keep-alive的理解和应用详解
这篇文章主要介绍了vue缓存之keep-alive的理解和应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）
这篇文章主要介绍了vue搜索页开发实例（热门搜索，历史搜索，淘宝接口演示）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
Vue中props用法介绍
这篇文章主要给大家分享的是 Vue中props用法介绍，在Vue中通过props,可以将原本孤立的组件串联起来，也就是可以子组件可以接收父组件传递过来的data，下面我们一起进入文章看看内容的详细介绍吧,需要的朋友也可以参考一下
2021-11-11
Vue实现简单的购物车案例
这篇文章主要为大家详细介绍了Vue实现简单的购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
如何使用Vue+Element做个个人中心
我们在做了用户登录后,就会让用户跳转到个人中心,下面这篇文章主要给大家介绍了关于如何使用Vue+Element做个个人中心的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
vue 自定义 select内置组件
这篇文章主要介绍了vue 自定义内置组件 select的相关知识，整合了第三方jquery 插件select2,具体实例代码大家参考下本文
2018-04-04
ElementUI下拉框选择后不显示值问题及解决
这篇文章主要介绍了ElementUI下拉框选择后不显示值问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02