<el-upload 修改list识别的key
时间: 2023-11-06 21:02:34 浏览: 68
在El-upload组件中,可以通过更改`list-type`属性的值来修改list识别的key。
`list-type`属性决定了上传文件列表的样式和类型。默认情况下,它的值为`text`,表示以文本形式显示上传的文件列表。但是我们也可以将它的值修改为其他值来实现不同的效果。
要自定义list识别的key,我们可以将`list-type`属性的值设置为`picture-card`。这样会以图片卡片的形式显示上传的文件列表,并且每个文件都有一个删除按钮。这个删除按钮可以用来删除相应的文件,而不是整个列表。
例如,我们可以这样修改El-upload组件的`list-type`属性:
```
<el-upload
list-type="picture-card"
:on-remove="handleRemove"
>
</el-upload>
```
在这个例子中,我们将list-type属性设置为`picture-card`。同时,我们还绑定了一个`on-remove`事件,该事件会在删除按钮被点击时触发,并调用`handleRemove`方法来处理删除文件的逻辑。
通过这种方式,我们可以轻松地修改El-upload组件识别的key,以符合我们的需求。
相关问题
el-upload slot
el-upload组件提供了多个插槽(slot)来自定义上传组件的不同部分。以下是el-upload组件的几个插槽及其作用:
1. trigger:用于自定义上传触发按钮的内容,例如可以在按钮中添加图标或文字。
```html
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple>
<span slot="trigger">点击上传</span>
</el-upload>
```
2. tip:用于自定义上传提示信息的内容,例如可以在提示信息中添加上传文件类型和大小的限制。
```html
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple>
<div slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
3. default:用于自定义上传列表的内容,例如可以在列表中添加文件名、文件大小、上传进度等信息。
```html
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple>
<div slot="default" class="upload-list">
<div class="upload-item" v-for="file in fileList" :key="file.name">
<span class="file-name">{{ file.name }}</span>
<span class="file-size">{{ file.size }} bytes</span>
<el-progress class="file-progress" :percentage="file.percentage"></el-progress>
</div>
</div>
</el-upload>
```
el-upload 照片墙切换
为实现el-upload照片墙的切换效果,可以通过以下步骤实现:
1.在el-upload组件中设置show-file-list为false,这样就不会展示图片本身的file,只展示父组件传来的数据信息。
2.设置auto-upload为false,这样就不会自动上传文件,而是通过onchange来触发上传动作,顺便检测类型,确认上传大小等操作。
3.在父组件中维护一个数组,用于存储上传的图片信息。
4.在el-upload组件中设置一个v-for循环,循环展示父组件传来的图片信息。
5.在父组件中设置一个按钮或者其他交互方式,用于切换展示的图片。
6.在按钮的点击事件中,修改展示图片的索引值,从而实现图片的切换效果。
以下是示例代码:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:show-file-list="false"
:auto-upload="false"
:on-change="handleChange"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div v-for="(item, index) in fileList" :key="index">
<img :src="item.url" alt="" />
</div>
</el-upload>
<el-button @click="handlePrev">上一张</el-button>
<el-button @click="handleNext">下一张</el-button>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [], // 存储上传的图片信息
currentIndex: 0 // 当前展示图片的索引值
};
},
methods: {
handleChange(file, fileList) {
// 上传成功后将图片信息存储到fileList中
this.fileList = fileList;
},
handlePrev() {
// 切换到上一张图片
if (this.currentIndex > 0) {
this.currentIndex--;
}
},
handleNext() {
// 切换到下一张图片
if (this.currentIndex < this.fileList.length - 1) {
this.currentIndex++;
}
}
}
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)