Vue3的el-table-column增加跳轉其他頁面的方法
更新時間：2025年02月06日 09:50:02 作者：KrityCat
文章介紹了如何在Vue3的el-table-column中增加跳轉其他頁面的功能,并提供了示例代碼和handleUpdate方法的源碼分析,感興趣的朋友跟隨小編一起看看吧
效果圖
既不影響顯示內容，也不影響頁面跳轉
el-table-column寫法
<el-table-column
label="系統(tǒng)單號"
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 },
});
}源碼分析
可參考鎧思進銷存系統(tǒng)的ks-vue3/src/views/system/purchase/purchaseDocumentQuery.vue
到此這篇關于Vue3的el-table-column增加跳轉其他頁面的文章就介紹到這了,更多相關Vue3 el-table-column跳轉其他頁面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了vue3源碼分析reactivity實現(xiàn)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
這篇文章主要介紹了vue通信方法EventBus的實現(xiàn)代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
這篇文章主要給大家介紹了關于Vue+element-ui添加自定義右鍵菜單的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
在本篇文章里小編給大家整理的是關于Vue+Vuex實現(xiàn)自動登錄的知識點詳解，需要的朋友們可以學習下。2020-03-03
vue.js自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了vue.js自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個響應式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10
在Web開發(fā)領域,鼠標跟隨效果是一種能顯著提升頁面交互性、增加動態(tài)感與趣味性的常見方式,下面我們看看如何使用Vue3實現(xiàn)鼠標跟隨效果吧2024-11-11
這篇文章主要介紹了Vue編寫自定義Plugin詳解,在Vue開發(fā)中，我們經(jīng)常需要使用一些第三方庫或功能性模塊，Vue插件就是一種將這些庫或模塊集成到Vue應用中的方式,插件是Vue.js提供的一種機制，用于擴展Vue的功能,需要的朋友可以參考下2023-08-08
本篇文章主要介紹了vue修改vue項目運行端口號的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08