elment-ui获取url在表格以附件的形式展示
时间: 2024-06-10 15:03:55 浏览: 88
可以通过表格的列模板来实现将url以附件形式展示,具体实现如下:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column label="附件">
<template slot-scope="scope">
<el-link :href="scope.row.url" target="_blank">{{ scope.row.fileName }}</el-link>
</template>
</el-table-column>
</el-table>
</template>
```
其中,`:data="tableData"` 表示表格的数据源,需要将 url 和附件名称存储在数据中,例如:
```js
tableData: [
{
name: '文件',
url: 'https://example.com/file.pdf',
fileName: 'file.pdf'
}
// ...
]
```
在表格的第二列中使用了 `slot-scope` 来获得当前行的数据,将 url 和文件名以链接的形式展示在表格中。`target="_blank"` 表示链接在新窗口中打开。