vxe-table 使用 vxe-upload 在表格中实现非常强大的粘贴上传图片和附件
看看 vxe-table 渲染器强大到什么地步;在开发需求中,经常会在表格列表中放入图片展示,例如头像、视频图片,附件列表等,但需要对表格批量操作是,会比较繁琐,那么有没有方便操作一点的放呢,肯定是有的;
配合 vxe-upload 上传;比如复制或者截图一张图片,通过粘贴方式快速粘贴到单元格中,能支持单张、多张、查看、预览。上传精进度等。
渲染 vxe-upload,实现粘贴、拖拽上传
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
const fileList2CellRender = {
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 = {
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 = {
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' }] }
]
}
return {
gridOptions,
fileList2CellRender,
imgList2CellRender
}
}
}
</script>
分类:
vxe-table
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体