文件异步上传使用虚拟滚动el-table-virtual-scroll加载数据

需求

最近在写一个批量导入数据的功能，需要通过上传文件异步导入调接口，将后台返回Excel文件里的数据不做分页用列表展示出来，再加上需要在列表嵌入输入框，所以加载大量数据渲染的时候要加载很久，需要用到虚拟滚动加载

实现这个功能三个关键点：

文件异步手动上传

多选列表嵌入输入框

虚拟滚动加载

el-table-virtual-scroll插件

这个插件用于虚拟滚动加载数据，仅支持vue2，具体使用参考下面地址，案例里也有源码示例，挺好用的，非常推荐！！！

GitHub地址：el-table-virtual-scroll

案例地址：el-table-virtual-scroll使用

实现

安装插件

npm i el-table-virtual-scroll -S

代码

文件异步上传

异步上传需要:auto-upload="false"，在文件上传change时通过splice进行删除覆盖可以保证获取到新上传的文件，每次点击导入就会通过this.$refs.upload.submit()异步手动上传

<el-upload ref="upload" accept=".xlsx" :file-list="fileList" :action="uploadAction" :auto-upload="false" :on-success="handleUploadSuccess" :on-change="handleChange" :show-file-list="false"><el-button type="primary" class="btn-download">上传文件</el-button>
</el-upload><el-button type="primary" class="button-minwidth"  @click="leadIn">导入</el-button>

<script>
export default {data() {return{fileList:[],uploadAction:'接口地址',resultData:[]}},methods:{//上传文件时覆盖handleChange(file, fileList){if (fileList.length > 1) {fileList.splice(0, 1);}},//上传文件成功handleUploadSuccess(res){if (code===200) { this.resultData=res.datathis.$message({type: "success",message: res.message || "操作成功",});}else{this.$message({type: "error",message: res.message || "操作失败",});}},//导入leadIn() {let uploadFiles = this.$refs.upload.uploadFiles[0]if(uploadFiles) {this.$refs.upload.submit()}else{this.$message({type: "error",message: "请上传文件",});}},}
}
</script>

多选列表嵌入输入框虚拟滚动加载

文件上传获取到的resultData展示在列表，嵌入输入框可修改别名，后台返回的数据一次最少大约有2000条左右而且不做分页，需要使用虚拟滚动加载

<template><div><!-- data为全部数据，key-prop绑定列唯一值 --><virtual-scroll :data="resultData" :item-size="53" key-prop="id" @change="(virtualList) => tableData = virtualList" :virtualized="true" @selection-change="handleSelectionChange"><!-- row-key绑定列唯一值，height一定要设置否则会滚动条滚动位置不对且数据滚动全部加载完后会出现白板--><el-table row-key="id" :data="tableData" height="calc(100vh - 440px)"><template slot="empty"><el-empty description="暂无数据"></el-empty></template><!--使用虚拟加载插件多选需要引入VirtualColumn--><virtual-column width="60" type="selection"></virtual-column><el-table-column prop="id" label="ID" min-width="100"></el-table-column><el-table-column prop="name" label="名称" min-width="100"></el-table-column><el-table-column label="别名" min-width="100"><template slot-scope="scope"><!--嵌入输入框填写绑定scope.row.alias--><el-input v-model="scope.row.alias" size="small" label-width="80px" :placeholder="请输入别名" maxlength="32"/></template></el-table-column></el-table></virtual-scroll><el-button type="primary" class="button-minwidth" @click="submit">提交</el-button></div>
</template>

<script>
import VirtualScroll from 'el-table-virtual-scroll';
import { VirtualColumn } from 'el-table-virtual-scroll';
export default {components: {'virtual-scroll':VirtualScroll,VirtualColumn},data(){return{tableData:[],  //虚拟滚动加载显示的数据multipleSelection:[], // 勾选的数据bindList:[] // 需要提价的数据}},methods:{handleSelectionChange(val){this.multipleSelection = val},submit() {let aliasList=[]const selectData = this.multipleSelectionif(selectData.length<=0){this.$message({type: "error",message: "请选择数据",});}for (let i = 0; i < selectData.length; i++) {aliasList.push(element.alias)let list=new Set(aliasList)if(aliasList.length !== list.size){this.$message({type: "error",message: "别名不能重复",});return;}const element = selectData[i];if(!element.alias){this.$message({type: "error",message: "名称为"+`：${element.name} `+"的别名未填写",});return;}}this.bindList.push({id: element.id,alias: element.alias,name: element.name,})}}
}
</script>

文件异步上传使用虚拟滚动el-table-virtual-scroll加载数据相关推荐

java文件异步上传_[Java教程]原生javascript实现文件异步上传
[Java教程]原生javascript实现文件异步上传 0 2017-10-25 19:00:06 效果图: 代码:(demo33.jsp) demo33.jsp名称文件确定本文网址:http:/ ...
源生ajax同步异步请求,源生JS怎样实现文件异步上传
这次给大家带来源生JS怎样实现文件异步上传,源生JS实现文件异步上传的注意事项有哪些,下面就是实战案例,一起来看一下. 名称文件确定 function ajaxUploadFile() { var ...
html5 上传图片模板,HTML5实现图片文件异步上传
,过现前个能文使近记接的端问对字用近记接利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段. ...
j2ee html5,HTML5+J2EE实现文件异步上传
P.S. HTML5经过了W3C的8年努力,终于正式推广了.这次升级最大的就是升级了XMLHTTPRequest,让它变成了XMLHTTPRequest Level II(这有啥奇怪的?).这个对象现 ...
js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
转载链接:http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配 ...
滑轮滚动到页面底部ajax加载数据的实例
滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧,小菜总结记录之用,高手勿喷. 当然本例子采用的是jquery库,后期会做成原生js. 本例的数据调用的是锋利的j ...
java文件异步上传_java 异步上传文件
我们的java上传文件,需要form同步上传,并且需要设置enctype为multipart/form-data. 如果将form使用ajax异步提交的话,将会报错说enctype不是multipar ...
webpy+uploadify实现文件异步上传
Uploadify的官方文档见链接:点击打开链接程序结构图源代码 $def with ()  <html lang="zh ...
tp5文件异步上传入库+七牛云+预览图
七牛云存储前提 composer require qiniu/php-sdk 然后七牛云官网注册注册注册!!!! HTML 图片添加页面 <body> <form enctyp ...

文件异步上传使用虚拟滚动el-table-virtual-scroll加载数据

需求

el-table-virtual-scroll插件

实现

安装插件

代码

文件异步上传使用虚拟滚动el-table-virtual-scroll加载数据相关推荐

最新文章

热门文章