Elementui el-upload 图片列表缩略图模式添加查看大图含删除功能_elementui 查看图片列表

前言：由于官网el-upload 图片列表缩略图模式没有查看大图的功能，所有自己自定义了一个，其中很多投机取巧的方式，写的不好，若有更好的方法，请留言哦(^▽)，不多说废话，直接贴

<template>
<el-upload 
	class="upload-el" 
	accept=".jpg,.png,.bmp" //限制上传的图片类型
	:show-file-list="true" //是否显示已上传文件列表
	multiple //设置多选
	:limit="3" //最大允许上传个数
	:on-exceed="handleExceed" //文件超出个数限制时的钩子
	:file-list="fileArr" //上传的文件列表
	:action="uploadConfig.uploadFileUrl" //必选参数，上传的地址
	:headers="uploadConfig.headers" //设置上传的请求头部例如一些token信息
	:on-error="uploadError" //文件上传失败时的钩子
	:on-success="uploadSuccess" //文件上传成功时的钩子
	list-type="picture">
	<el-button size="small" class="uplaodBtn">上传</el-button>
	<template #tip>
		<div class="el-upload__tip">请上传格式为jpg、png、bmp的图片，且确保图片内容清晰可见</div>
		   <!-- 关键代码在这里，这段代码是我将list-type="picture"的时候显示出来的缩略图的代码复制出来修改的 这里无法覆盖原来的picture，所有我在ul里面加了一个show的类名，然后在样式里面将原来的隐藏了，机智吧 (*^▽^*) -->
			<ul class="el-upload-list el-upload-list--picture show">
				<li v-for
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19