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)原理
這篇文章主要為大家介紹了vue3源碼分析reactivity實現(xiàn)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
vue 左滑刪除功能的示例代碼
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-01-01
vue通信方式EventBus的實現(xiàn)代碼詳解
這篇文章主要介紹了vue通信方法EventBus的實現(xiàn)代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-06-06
Vue+element-ui添加自定義右鍵菜單的方法示例
這篇文章主要給大家介紹了關于Vue+element-ui添加自定義右鍵菜單的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
Vue+Vuex實現(xiàn)自動登錄的知識點詳解
在本篇文章里小編給大家整理的是關于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
利用Vue3實現(xiàn)鼠標跟隨效果
在Web開發(fā)領域,鼠標跟隨效果是一種能顯著提升頁面交互性、增加動態(tài)感與趣味性的常見方式,下面我們看看如何使用Vue3實現(xiàn)鼠標跟隨效果吧
2024-11-11
Vue編寫自定義Plugin詳解
這篇文章主要介紹了Vue編寫自定義Plugin詳解,在Vue開發(fā)中，我們經常需要使用一些第三方庫或功能性模塊，Vue插件就是一種將這些庫或模塊集成到Vue應用中的方式,插件是Vue.js提供的一種機制，用于擴展Vue的功能,需要的朋友可以參考下
2023-08-08
vue修改vue項目運行端口號的方法
本篇文章主要介紹了vue修改vue項目運行端口號的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08