render函数，自定义渲染列，传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引。
render:(h,params) => { return h(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容]) }若要显示一排图片，每个图片hover的时候，可以查看大图和删除。 如api中渲染的列表 因此render函数中需要显示子元素，先返回一个div，div下创建一个icon，和另一个div，icon用于显示图标，div中再创建两个子元素，分别显示查看和删除图标，由样式来控制其展示情况，【】中是建立子元素，click分别用于响应事件。
render: (h, params) => { let type=params.row.type; let icon='ios-document-outline'; let url=params.row.attachment; return h('div',{class: 'demo-upload-list'},[ h('Icon',{ props: { type: icon }, style: { fontSize: '50px', color: '#559DF9' }, }), h('div',{ class:'demo-upload-list-cover', },[ h('Icon',{ props: { type: 'ios-eye-outline' }, on: { click: () => { this.showEvidenceDetail(params.row.attachment,params.row.type); } } }), h('Icon',{ props: { type: 'ios-trash-outline' }, on: { click: () => { this.handleEvidence(params.index,params.row.evidenceIdList) } } }), ]), ]) }api代码：
<template> <div class="demo-upload-list" v-for="item in uploadList"> <template v-if="item.status === 'finished'"> <img :src="item.url"> <div class="demo-upload-list-cover"> <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon> <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon> </div> </template> <template v-else> <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress> </template> </div> <Upload ref="upload" :show-upload-list="false" :default-file-list="defaultList" :on-success="handleSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" multiple type="drag" action="//jsonplaceholder.typicode.com/posts/" style="display: inline-block;width:58px;"> <div style="width: 58px;height:58px;line-height: 58px;"> <Icon type="ios-camera" size="20"></Icon> </div> </Upload> <Modal title="View Image" v-model="visible"> <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%"> </Modal> </template> <script> export default { data () { return { defaultList: [ { 'name': 'a42bdcc1178e62b4694c830f028db5c0', 'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar' }, { 'name': 'bc7521e033abdd1e92222d733590f104', 'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar' } ], imgName: '', visible: false, uploadList: [] } }, methods: { handleView (name) { this.imgName = name; this.visible = true; }, handleRemove (file) { const fileList = this.$refs.upload.fileList; this.$refs.upload.fileList.splice(fileList.indexOf(file), 1); }, handleSuccess (res, file) { file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar'; file.name = '7eb99afb9d5f317c912f08b5212fd69a'; }, handleFormatError (file) { this.$Notice.warning({ title: 'The file format is incorrect', desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.' }); }, handleMaxSize (file) { this.$Notice.warning({ title: 'Exceeding file size limit', desc: 'File ' + file.name + ' is too large, no more than 2M.' }); }, handleBeforeUpload () { const check = this.uploadList.length < 5; if (!check) { this.$Notice.warning({ title: 'Up to five pictures can be uploaded.' }); } return check; } }, mounted () { this.uploadList = this.$refs.upload.fileList; } } </script> <style> .demo-upload-list{ display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.2); margin-right: 4px; } .demo-upload-list img{ width: 100%; height: 100%; } .demo-upload-list-cover{ display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); } .demo-upload-list:hover .demo-upload-list-cover{ display: block; } .demo-upload-list-cover i{ color: #fff; font-size: 20px; cursor: pointer; margin: 0 2px; } </style>