Vue3+ant table 点击并跳转超链接

Vue3+ant table开发 需求是点击Title这个数据 跳转至对应的超链接

首先是columns的代码：

const columns = [
  {
    title: '',
    dataIndex: 'title',
    align: 'center',
    scopedSlots: {customRender: 'originUrl'},
  }
]

slot部分代码：

  <a-table :columns="columns"
             :data-source="data"
             :pagination="pagination"
             :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
             class="Atable"
             size="default"
    >
      <template #bodyCell="{ column,text,record }">
        <template v-if="column.dataIndex === 'title'">
          <a slot="originUrl" :href="record.originUrl" target="_blank">
           {{
              text
            }}
          </a>
        </template>
      </template>
    </a-table>

关键代码其实就是

<template v-if="column.dataIndex === 'title'">
   <a slot="originUrl" :href="record.originUrl" target="_blank">
     {{text}}
   </a>
</template>