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

您可能感兴趣的文章:

vue3源码分析reactivity实现原理
这篇文章主要为大家介绍了vue3源码分析reactivity实现原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
vue 左滑删除功能的示例代码
这篇文章主要介绍了vue 左滑删除功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
vue通信方式EventBus的实现代码详解
这篇文章主要介绍了vue通信方法EventBus的实现代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
Vue+element-ui添加自定义右键菜单的方法示例
这篇文章主要给大家介绍了关于Vue+element-ui添加自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
Vue+Vuex实现自动登录的知识点详解
在本篇文章里小编给大家整理的是关于Vue+Vuex实现自动登录的知识点详解，需要的朋友们可以学习下。
2020-03-03
vue.js自定义组件实现v-model双向数据绑定的示例代码
这篇文章主要介绍了vue.js自定义组件实现v-model双向数据绑定的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
Vue3中的createGlobalState用法及示例详解
createGlobalState 是 Vue 3 中一种管理全局状态的简便方式,通常用于管理多个组件间共享的状态,由 @vueuse/core 提供的,允许创建一个响应式的全局状态,本文给大家介绍了Vue3中的createGlobalState用法及示例,需要的朋友可以参考下
2024-10-10
利用Vue3实现鼠标跟随效果
在Web开发领域,鼠标跟随效果是一种能显著提升页面交互性、增加动态感与趣味性的常见方式,下面我们看看如何使用Vue3实现鼠标跟随效果吧
2024-11-11
Vue编写自定义Plugin详解
这篇文章主要介绍了Vue编写自定义Plugin详解,在Vue开发中，我们经常需要使用一些第三方库或功能性模块，Vue插件就是一种将这些库或模块集成到Vue应用中的方式,插件是Vue.js提供的一种机制，用于扩展Vue的功能,需要的朋友可以参考下
2023-08-08
vue修改vue项目运行端口号的方法
本篇文章主要介绍了vue修改vue项目运行端口号的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08