ElementPlus的el-table-column如何添加超链接的代码

在ElementPlus中，要在el-table-column中添加超链接，你可以使用el-link组件或者直接在template标签内使用原生的a标签。以下是两种方法的示例代码：

使用el-link组件：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-link :href="row.url" target="_blank">查看详情</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', url: 'https://example.com' },
        // ...更多数据
      ]
    };
  }
};
</script>

使用原生a标签：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <a :href="row.url" target="_blank">查看详情</a>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', url: 'https://example.com' },
        // ...更多数据
      ]
    };
  }
};
</script>

在这两种方法中，我们都通过row参数访问当前行的数据，并使用row.url作为超链接的目标地址。使用target="_blank"可以确保链接在新标签页中打开。