element-ui给表格中的一列文字添加不同的超链接
时间: 2024-03-16 07:10:53 浏览: 120
给UITextView添加超链接
对于Element UI表格中的一列文字添加不同的链接,你可以使用定义的`formatter`函数来实现。下面是一个示例:
```vue
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="名称" :formatter="formatName"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '项目A', link: 'https://example.com/project-a' },
{ id: 2, name: '项目B', link: 'https://example.com/project-b' },
// ...
]
};
},
methods: {
formatName(row) {
return `<a href="${row.link}" target="_blank">${row.name}</a>`;
}
}
};
</script>
```
在上面的示例中,我们使用`formatter`属性绑定了一个名为`formatName`的方法来格式化表格列中的数据。该方法返回带有超链接的名称。你可以根据需要修改`tableData`中的数据和链接。请注意,返回的字符串应该是包含HTML标记的文本,所以我们使用了`<a>`标签来创建超链接。
这样,表格中的名称列就会显示为带有超链接的文字了。点击每个项目的名称,将会在新窗口中打开相应的链接。
阅读全文