el-table-column 点击下载文件
时间: 2024-08-15 11:00:45 浏览: 41
`el-table-column` 是 Element UI 中表格组件 `el-table` 的列定义部分,它主要用于定制表格展示的内容和交互。当你想要在某列添加点击下载文件的功能时,可以在该列的配置选项里设置 `click` 事件处理器,并通过这个事件处理程序来触发文件的下载。
例如,在 Vue 项目中,你可以这样做:
```html
<template>
<el-table :data="tableData">
<el-table-column
label="操作"
width="150"
align="center">
<template slot-scope="scope">
<el-button @click="downloadFile(scope.row.downloadUrl)">下载</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
downloadFile(url) {
const a = document.createElement('a')
a.href = url
a.target = '_blank'
a.download = '文件名' // 替换为你实际的文件名
a.click()
},
}
}
</script>
```
在这个例子中,`downloadFile` 方法创建了一个新的 `<a>` 标签,设置了它的 `href` 为数据项的下载链接,并模拟了点击事件让浏览器自动下载文件。
阅读全文