前几天测试提了个BUG，文件列表展示5w个文件页面会卡顿甚至奔溃。
项目用的是vue+element-ui框架，我是使用el-tree进行渲染文件列表的。
参考网上使用virtual-scroll-list插件与el-tree源码写成一个新组件。virtual-scroll-list可以只渲染页面呈现部分的节点，这样就不会造成卡顿了，源el-tree是直接将5w个节点直接渲染到页面，导致页面奔溃。
这是使用virtual-scroll-list插件与el-tree源码结合后的组件：github组件下载 、gitee组件下载
组件使用方法（传入的属性）与el-tree一致，可根据自己的业务需求更改，我做的需求只是进行文件导出。
组件使用示例：
<virtualNodeTree
ref="dirTree"
:data.sync="treeData"
:load="loadDir"
:keeps="50"
:check-strictly="false"
:props="{
isLeaf: 'leaf'
}"
lazy
show-checkbox
node-key="path"
class="treeWrap"
@check-change="handleCheckChange">
<span slot-scope="{ data }">
<svg-icon v-if="data.ftype === '1'" style="color: #fdd300;" icon-class="faFolder"/>
<span v-else>
<svg-icon :icon-class="fileInputHandle(data).icon" :style="{color: fileInputHandle(data).color}"/>
</span>
<span>{{ data.fname }}</span>
</span>
</virtualNodeTree>
组件引入：
效果图：
more文件下面有5w个文件，实际页面渲染50个文件，根据组件传入的keeps展示文件数，默认30个；
注意：
1.搜索只能搜到已渲染的节点，可以自己做递归搜索源数据，不过这样的话数据一多会很卡，建议后端写个搜索api
2.该组件的父容器一定要确定高度，不能以整个body作为父容器，这样有可能滚动时渲染不出下面的文件。
补充：
我使用的完整代码
<template>
<div class="app-container">
<div>
<el-button
class="ame-button"
size="mini"
type="primary"
@click="exportHandle"
:loading="exportLoading"
:disabled="exportLoading"
>导出
</el-button>
</div>
<virtualNodeTree
v-loading="loading"
ref="dirTree"
:data.sync="treeData"
:load="loadDir"
:keeps="50"
:check-strictly="false"
:props="{
isLeaf: 'leaf'
}"
lazy
show-checkbox
node-key="path"
class="treeWrap"
@check="handleNodeCheck"
>
<span slot-scope="{ data }">
<svg-icon v-if="data.ftype === '1'" style="color: #fdd300;" icon-class="faFolder"/>
<span v-else>
<svg-icon :icon-class="fileInputHandle(data).icon" :style="{color: fileInputHandle(data).color}"/>
</span>
<span>{{ data.fname }}</span>
</span>
</virtualNodeTree>
<!--
<el-tree
ref="dirTree"
:data.sync="treeData"
:load="loadDir"
:check-strictly="false"
:props="{
isLeaf: 'leaf'
}"
lazy
show-checkbox
node-key="path"
class="treeWrap"
@check-change="handleCheckChange"
>
<span slot-scope="{ data }">
<svg-icon v-if="data.ftype === '1'" style="color: #fdd300;" icon-class="faFolder"/>
<span v-else>
<svg-icon :icon-class="fileInputHandle(data).icon" :style="{color: fileInputHandle(data).color}"/>
</span>
<span>{{ data.fname }}</span>
</span>
</el-tree>
-->
</div>
</template>
<script>
import { slotFileList, slotFileExport } from '@/api/disc.js'
import { downloadFile } from '@/utils/index'
import getFileIcon from '@/utils/getFileIcon'
import { getFilesNumFromFolder } from '@/api/mtoptical'
import { Message } from 'element-ui'
import virtualNodeTree from '@/components/virtualNodeTree/tree'
export default {
name: 'DiscFileDetail',
components: { virtualNodeTree },
data() {
return {
treeData: [],
dirInfos: [],
lock: false,
loading:false,
exportLoading:false,
exportMaxNum: 10000 // 允许导出文件的最大数量
}
},
mounted() {},
methods: {
async handleNodeCheck(data, selctedInfo) {
const checked = selctedInfo.checkedKeys.includes(data.path)
if (data.ftype == '1' && checked) {
if (typeof data.allFileNum === 'number') {
// 已获悉该文件夹数量的不再查询
this.exportUtils('fileNumChange', { dirInfos: this.dirInfos, data, fileNum: parseInt(data.allFileNum), checked })
return
}
const params = {
nodeId: this.$route.query.nodeId || '',
libId: this.$route.query.libId || '',
grooveId: this.$route.query.grooveId || '',
path: data.path || '/'
}
if (this.$route.query.rfid) params.rfid = this.$route.query.rfid
const res = await this.getFilesNumFromFolder(params)
data.allFileNum = res
this.exportUtils('fileNumChange', { dirInfos: this.dirInfos, data: data || '/', fileNum: parseInt(res), checked })
// if (res > this.exportMaxNum) {
// this.$message.error(`导出文件数量不能超过${this.exportMaxNum}`)
// // 取消勾选
// this.$refs.dirTree.setChecked(data, false, true)
// } else {
// data.allFileNum = res
// this.exportUtils('fileNumChange', { dirInfos: this.dirInfos, data: data || '/', fileNum: parseInt(res), checked })
// console.log('添加数量完成', this.dirInfos[0]);
// }
} else if (data.ftype != '1' && checked) {
// 勾选文件
this.exportUtils('fileNumChange', { dirInfos: this.dirInfos, data, fileNum: null, checked })
} else if (data.ftype != '1') {
// 取消勾选文件
this.exportUtils('fileNumChange', { dirInfos: this.dirInfos, data, fileNum: null, checked })
} else {
// 取消勾选文件夹
this.exportUtils('fileNumChange', { dirInfos: this.dirInfos, data, fileNum: null, checked })
}
},
getFilesNumFromFolder(params) {
return new Promise((resolve, reject) => {
const loaderTip = this.$loading({
lock: true,
text: '请稍等......',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
getFilesNumFromFolder(params).then(res => {
// console.log('获取到的文件数量', res);
loaderTip.close()
resolve(typeof res === 'number' ? parseInt(res) : 0)
}).catch(() => {
loaderTip.close()
reject(0)
})
})
},
fileInputHandle(file) {
const nameSplit = file.fname.split('.')
let iconInfo = null
if (nameSplit.length > 1) {
iconInfo = getFileIcon(nameSplit[nameSplit.length - 1])
} else {
iconInfo = getFileIcon('其他')
}
return iconInfo
},
async exportUtils(fn, params) {
return new Promise(async(resolve, reject) => {
let fileTotal, dataPath
switch (fn) {
// 添加文件夹信息到文件夹信息集合内
case 'addDirInfo':
for (let i = 0; i < params.dirInfos.length; i++) {
if (params.node.data.path === params.dirInfos[i].path) {
params.dirInfos[i].children = params.addInfo
resolve('finished')
}
if (params.dirInfos[i].children) {
const status = this.exportUtils('addDirInfo', { ...params, dirInfos: params.dirInfos[i].children })
if (status === 'finished') resolve()
}
}
break
// 添加文件夹数量到文件夹信息集合内
case 'fileNumChange':
// 勾选的是文件比对时需要删除path后面的文件名后再比对
if (params.data.ftype != '1') {
const tmp = params.data.path.split('/')
dataPath = tmp.slice(0, tmp.length - 1).join('/')
} else {
dataPath = params.data.path || '/'
}
for (let i = 0; i < params.dirInfos.length; i++) {
// 找到该文件夹信息
if (dataPath === params.dirInfos[i].path) {
// console.log('已找到该信息', params);
if (params.checked) {
const curDirSelFileNum = params.data.ftype == '1' ? (typeof params.dirInfos[i].curSelFileNum === 'number' ? params.dirInfos[i].curSelFileNum : 0) : 0
const curAllCheckedFileNum = await this.exportUtils('getFileTotal') + (params.fileNum || 1) - curDirSelFileNum
// 添加前检查是否超出最大导出数量
if (curAllCheckedFileNum > this.exportMaxNum) {
this.$message.error(`导出文件数量不能超过${this.exportMaxNum}`)
// 取消勾选
this.$refs.dirTree.setChecked(params.data, false, true)
if (params.data.ftype == '1') {
params.dirInfos[i].curSelFileNum = 0
}
resolve(params.data.ftype == '1' ? -curDirSelFileNum : 0)
return
}
// console.log('当前勾选文件数', curAllCheckedFileNum);
// 勾选的是文件夹
if (params.data.ftype == '1') {
params.dirInfos[i].allFileNum = params.fileNum
params.dirInfos[i].curSelFileNum = params.fileNum
this.exportUtils('setAllChildrenChecked', { children: params.dirInfos[i].children })
resolve(params.fileNum - curDirSelFileNum)
} else {
if (params.dirInfos[i].curSelFileNum === 'unknown') {
params.dirInfos[i].curSelFileNum = 1
} else {
params.dirInfos[i].curSelFileNum += 1
}
resolve(1)
}
} else {
// 取消勾选
if (params.data.ftype == '1') {
params.dirInfos[i].curSelFileNum = 0
if (params.dirInfos[i].allFileNum === 'unknown') {
const queryParams = {
nodeId: this.$route.query.nodeId || '',
libId: this.$route.query.libId || '',
grooveId: this.$route.query.grooveId || '',
path: params.data.path || '/'
}
resolve(await this.getFilesNumFromFolder(queryParams))
}
resolve(params.dirInfos[i].allFileNum)
} else {
if (params.dirInfos[i].curSelFileNum !== 'unknown') {
params.dirInfos[i].curSelFileNum -= 1
}
resolve(1)
}
}
}
if (params.dirInfos[i].children && params.dirInfos[i].children.length !== 0) {
const num = await this.exportUtils('fileNumChange', { ...params, dirInfos: params.dirInfos[i].children })
if (typeof num === 'number') {
if (params.dirInfos[i].curSelFileNum === 'unknown') {
params.dirInfos[i].curSelFileNum = num
} else {
params.dirInfos[i].curSelFileNum += params.checked ? num : -num
}
resolve(num)
}
}
if (i === params.dirInfos.length - 1) resolve('continue')
}
break
// 获取已勾选的文件总数
case 'getFileTotal':
fileTotal = this.dirInfos.reduce((total, item) => {
const tmp = item.curSelFileNum === 'unknown' ? 0 : item.curSelFileNum
return total + tmp
}, 0)
resolve(fileTotal)
break
// 当父文件夹勾选后，将所有已知文件总数量的子文件夹的curSelFileNum设置为allSelFileNum
case 'setAllChildrenChecked':
if (Array.isArray(params.children) && params.children.length !== 0) {
for (const i in params.children) {
const allFileNum = params.children[i].allFileNum
params.children[i].curSelFileNum = allFileNum === 'unknown' ? 'unknown' : allFileNum
if (params.children[i].children && params.children[i].children.length !== 0) {
this.exportUtils('setAllChildrenChecked', params.children[i].children)
}
}
}
break
}
})
},
loadDir(node, resolve) {
const temp = {
nodeId: this.$route.query.nodeId || '',
libId: this.$route.query.libId || '',
oid: this.$route.query.oid || '',
path: node.data.path || '/'
}
if (this.$route.query.src === 'warehouseTask' &&
this.$route.query.rfid
) {
temp.rfid = this.$route.query.rfid
} else {
temp.grooveId = this.$route.query.grooveId || ''
}
this.loading = true;
slotFileList(temp).then(res => {
this.loading = false;
if (res && res instanceof Array) {
const addInfo = []
for (const i in res) {
if (res[i].ftype == '1') {
addInfo.push({
path: (node.data.path || '') + '/' + res[i].fname,
level: node.level + 1,
allFileNum: 'unknown',
curSelFileNum: 'unknown',
children: null
})
}
}
if (this.dirInfos.length === 0) {
this.dirInfos.push({
path: node.data.path || '/',
allFileNum: 'unknown',
curSelFileNum: 'unknown',
level: node.level,
children: addInfo
})
} else {
this.exportUtils('addDirInfo', { dirInfos: this.dirInfos, node, addInfo })
}
const list = res.map(item => {
return {
...item,
path: (node.data.path || '') + '/' + item.fname,
leaf: item.ftype != '1'
// disabled: item.ftype == '1'
}
})
resolve(list)
} else {
resolve([])
}
}).catch(() => {
this.loading = false;
resolve([])
})
},
exportHandle() {
const checkeNodes = this.$refs.dirTree.getCheckedNodes()
if (checkeNodes.length < 1) {
this.$message.error('请选择需要导出的数据')
return
}
this.exportLoading = true;
setTimeout(() => {
try {
// const paths = checkeNodes.map(item => {
// return { fileName: item.path, fileType: item.ftype === '1' ? '1' : '2' }
// })
let paths = checkeNodes.map(item => {
return { pathArr: item.path.split('/'), fileType: item.ftype === '1' ? '1' : '2' }
})
// 如果文件夹与子文件件都勾选了，只保留顶级文件夹
for (let i = 0; i < paths.length; i++) {
if (!paths[i]) continue
out: for (let j = i + 1; j < paths.length; j++) {
if (!paths[j]) continue out
for (let k = 0; k < paths[i].pathArr.length; k++) {
if (paths[i].pathArr[k] !== paths[j].pathArr[k]) {
continue out
}
}
paths[j] = null
}
}
// 过滤掉null的元素
paths = paths.filter(item => item)
// const paths = checkeNodes.map(item => item.path)
const temp = {
nodeId: this.$route.query.nodeId || '',
libId: this.$route.query.libId || '',
grooveId: this.$route.query.grooveId || '',
oid: this.$route.query.oid || '',
exportFiles: paths.map(item => {
return { fileName: item.pathArr.join('/'), fileType: item.fileType === '1' ? '1' : '2' }
})
}
if (this.$route.query.rfid) temp.rfid = this.$route.query.rfid
// console.log('提交参数', temp);
// return
slotFileExport(temp).then(res => {
downloadFile(res, '导出', 'xlsx')
this.exportLoading = false;
}).catch(error => {
const fileReader = new FileReader()
fileReader.onload = function(e) {
Message.error(this.result)
}
fileReader.readAsText(error.response.data)
this.exportLoading = false;
})
} catch (e) {
this.$message.error(e)
this.exportLoading = false;
}
}, 20)
}
}
}
</script>
<style lang="scss" scoped>
.el-tree {
height: calc(100vh - 136px - 90px);
}
.app-container {
background: #fff;
padding: 20px;
margin: 0px 10px 0 10px;
/* height: 800px; */
overflow-y: auto;
border-radius: 5px;
}
.treeWrap {
margin-top: 20px;
border-radius: 4px;
border: 1px solid #9e9e9e;
}
</style>