element ui 文件列表
时间: 2023-10-23 13:12:28 浏览: 132
element-ui提供了一个Upload组件,可以用于文件上传和文件列表展示。
你可以使用该组件的file-list属性来展示文件列表。file-list接受一个数组作为参数,数组中的每个元素表示一个上传的文件。每个文件对象可以包含文件的唯一标识符,文件名,文件大小等信息。
以下是一个使用element-ui Upload组件展示文件列表的示例代码:
```
<template>
<el-upload
action="/your-upload-url"
:file-list="fileList"
:on-success="handleSuccess"
>
<el-button type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [
// 文件对象示例
{
uid: '1',
name: '文件1.txt',
size: 1024
},
{
uid: '2',
name: '文件2.jpg',
size: 2048
}
]
};
},
methods: {
handleSuccess(response, file, fileList) {
// 上传成功后的回调函数,可以在这里更新fileList数据
this.fileList = fileList;
}
}
};
</script>
```
在上面的示例代码中,fileList数组用来存储上传的文件对象。每次上传成功后,通过handleSuccess函数更新fileList数据,从而实现文件列表的展示。
需要注意的是,示例中的action属性表示上传文件的地址。你需要将它替换为你实际的上传地址。
希望以上信息对你有帮助!如有更多问题,请随时提问。
阅读全文