看看 vxe-table 渲染器强大到什么地步；在开发需求中，经常会在表格列表中放入图片展示，例如头像、视频图片，附件列表等，但需要对表格批量操作是，会比较繁琐，那么有没有方便操作一点的放呢，肯定是有的；
配合 vxe-upload 上传；比如复制或者截图一张图片，通过粘贴方式快速粘贴到单元格中，能支持单张、多张、查看、预览。上传精进度等。
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import axios from 'axios'
const fileList2CellRender = reactive({
name: 'VxeUpload',
props: {
multiple: true,
showButtonText: false,
pasteToUpload: true,
moreConfig: {
maxCount: 1,
layout: 'horizontal'
},
uploadMethod ({ file }) {
const formData = new FormData()
formData.append('file', file)
return axios.post('/api/pub/upload/single', formData).then((res) => {
// { url: ''}
return {
...res.data
}
})
}
}
})
const imgList2CellRender = reactive({
name: 'VxeUpload',
props: {
mode: 'image',
multiple: true,
showButtonText: false,
pasteToUpload: true,
moreConfig: {
maxCount: 1
},
imageStyle: {
width: 40,
height: 40
},
uploadMethod ({ file }) {
const formData = new FormData()
formData.append('file', file)
return axios.post('/api/pub/upload/single', formData).then((res) => {
// { url: ''}
return {
...res.data
}
})
}
}
})
const gridOptions = reactive({
border: true,
showOverflow: true,
columnConfig: {
resizable: true
},
columns: [
{ type: 'seq', width: 70 },
{ field: 'name', title: 'Name', minWidth: 180 },
{ field: 'fileList2', title: '上传附件', width: 300, cellRender: fileList2CellRender },
{ field: 'imgList2', title: '上传图片', width: 210, cellRender: imgList2CellRender }
],
data: [
{ id: 10001, name: 'Test1', imgList2: [], fileList2: [{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }] },
{ id: 10002, name: 'Test2', imgList2: [{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }, { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }], fileList2: [] },
{ id: 10003, name: 'Test3', imgList2: [{ name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }], fileList2: [{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }, { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }, { name: 'fj187.jpg', url: 'https://vxeui.com/resource/img/fj187.jpg' }] }
]
})
</script>
