当前位置: 首页 > 网络编程 > JavaScript

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

时间:2025-03-19 10:39:06 JavaScript 我要投稿
文章介绍了如何在Vue3的el-table-column中增加跳转其他页面的功能,并提供了示例代码和handleUpdate方法的源码分析,感兴趣的朋友跟随小编一起看看吧

效果图

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

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

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