Vue3的el

文章介绍了如何在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 },  });}