Vue.js+Element-Plus el-table-v2如何实现带单元格值的链接？

问题描述 #

在使用Vue.js和Element-Plus的虚拟表格el-table-v2时，需要将某一列的单元格设置为可点击链接，且链接地址需包含当前单元格的instance_id数据。尝试使用ElLink和原生<a>标签结合v-bind:href的写法均未生效，仅使用静态href时无法传入动态数据。

原表格模板代码：

<template>
   <div>
      <el-table-v2
         :columns="columns"
         :data="data"
         :row-class="rowClass"
         :width="700"
         :height="400"
       />
   </div>
</template>

原列定义代码：

const columns = [
  {
    key: 'instance_id',
    title: 'instance_id',
    dataKey: 'instance_id',
    cellRenderer: ({ cellData: instance_id}) =>
        <ElLink v-bind:href="'https://url.base.net/index.php?/view/' + instance_id" target="_blank">{instance_id}</ElLink>
  },
  ...
]

尝试过的原生<a>标签写法：

<a v-bind:href="'https://url.base.net/index.php?/view/' + instance_id" target="_blank">{instance_id}</a>

解决方案 #

方案1：JSX写法（需项目支持JSX） #

若项目已配置支持Vue JSX，可直接修改列定义的cellRenderer：

import { ElLink } from 'element-plus'

const columns = [
  {
    key: 'instance_id',
    title: 'instance_id',
    dataKey: 'instance_id',
    cellRenderer: ({ cellData: instance_id }) => (
      <ElLink href={`https://url.base.net/index.php?/view/${instance_id}`} target="_blank">
        {instance_id}
      </ElLink>
    )
  },
  // 其他列配置...
]

注意：JSX中直接使用href属性绑定动态值，无需v-bind:前缀；使用ES6模板字符串拼接URL更简洁不易出错。

方案2：Vue渲染函数h（无需JSX支持） #

如果项目未配置JSX，使用Vue内置的h函数创建虚拟DOM即可：

import { h } from 'vue'
import { ElLink } from 'element-plus'

const columns = [
  {
    key: 'instance_id',
    title: 'instance_id',
    dataKey: 'instance_id',
    cellRenderer: ({ cellData: instance_id }) => h(ElLink, {
      href: `https://url.base.net/index.php?/view/${instance_id}`,
      target: '_blank'
    }, instance_id)
  },
  // 其他列配置...
]

方案3：原生<a>标签（渲染函数写法） #

若无需Element-Plus的ElLink样式，可直接渲染原生链接：

import { h } from 'vue'

const columns = [
  {
    key: 'instance_id',
    title: 'instance_id',
    dataKey: 'instance_id',
    cellRenderer: ({ cellData: instance_id }) => h('a', {
      href: `https://url.base.net/index.php?/view/${instance_id}`,
      target: '_blank'
    }, instance_id)
  },
  // 其他列配置...
]

内容的提问来源于stack exchange，提问作者Oleksii Karnatskyi