vxe-table 使用 vxe-upload 在表格中实现非常强大的粘贴上传图片和附件

看看 vxe-table 渲染器强大到什么地步；在开发需求中，经常会在表格列表中放入图片展示，例如头像、视频图片，附件列表等，但需要对表格批量操作是，会比较繁琐，那么有没有方便操作一点的放呢，肯定是有的；

配合 vxe-upload 上传；比如复制或者截图一张图片，通过粘贴方式快速粘贴到单元格中，能支持单张、多张、查看、预览。上传精进度等。

官网：https://vxetable.cn

渲染 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> 

查看 Gitee https://gitee.com/x-extends/vxe-table