您好，关于
element-
ui 的
上传组件 el-
upload，您可以通过
自定义 el-
upload-list 来实现
自定义上传列表的功能。
具体实现方法如下：
1. 在
el-
upload 组件中添加属性 list-type="picture-card"，并设置属性 action 为
上传文件的地址。
2. 在
el-
upload 组件中添加
自定义 slot，用于
自定义上传列表的
显示。
3. 在
自定义的
上传列表
组件中，使用
el-
upload-list
组件来展示
上传文件的列表。
4. 可以通过监听
el-
upload 组件的 change 事件来获取
上传的文件信息，并将
上传的文件信息传递给
自定义的
上传列表
组件，以展示
上传文件的列表。
以下是一个简单的示例代码：
```html
<template>
<div>
<
el-
upload
class="
upload-demo"
action="/
upload"
list-type="picture-card"
:on-change="handleChange"
>
<i class="
el-icon-plus"></i>
<div class="
upload-text">
上传图片</div>
</
el-
upload>
<custom-
upload-list :file-list="fil
eList"></custom-
upload-list>
</div>
</template>
<script>
import Custom
UploadList from './Custom
UploadList.vue';
export default {
components: {
Custom
UploadList,
},
data() {
return {
fil
eList: [],
};
},
methods: {
handleChange(file, fil
eList) {
this.fil
eList = fil
eList;
},
},
};
</script>
```
Custom
UploadList.vue
组件的代码如下：
```html
<template>
<
el-
upload-list class="custom-
upload-list" :file-list="fil
eList">
<template slot-scope="{file}">
<div class="custom-list-item">
<img :src="file.url" class="custom-list-item-thumbnail">
<div class="custom-list-item-name">{{ file.name }}</div>
<div class="custom-list-item-actions">
<
el-button size="small" type="text" @click="handleRemove(file)">删除</
el-button>
</div>
</div>
</template>
</
el-
upload-list>
</template>
<script>
export default {
props: {
fil
eList: {
type: Array,
default: () => [],
},
},
methods: {
handleRemove(file) {
const index = this.fil
eList.indexOf(file);
if (index !== -1) {
this.fil
eList.splice(index, 1);
}
},
},
};
</script>
```
希望这个示例能够帮助到您。如果您有任何
问题，请随时提出。
将结果打印出来可以看到第二张图片处于ready状态，emm那么正确操作应该是：
7727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
