vue项目使用element-ui 导入文件时表格区域显示加载百分比 （假的）
我的需求是：在导入过程中，展示动态百分比进度
声明属性：
loading: true, // 表格遮罩层
isShowLoading:false, // 百分比div展示判断
timer: null // 定时器
1、百分比进度的div：
<divstyle="
left:45%;
position:absolute;
top: 44%;
font-size:50px;
width: 100%;
z-index:10086;
color: #1890ff;"
v-show="isShowLoading">
<div class="box" id="div_box">
<div class="load" id="load"></div>
</div>
<span id='result'></span>
</div>
所以我将加载百分比的定时器写在了导入上传组件上
2、上传组件be like
<el-upload
class="upload-demo"
:action="actionFile"
:headers="headersFile"
:before-upload="beforeFileUpload"
:on-progress="onProgressFile"
:on-success="onSuccessFile"
name="file"
:limit="1"
>
<el-button
size="small"
icon="el-icon-folder-add"
plain
type="primary"
>导入</el-button
>
</el-upload>
3、上传前，让表格loading，让百分比div展示
上传时，百分比里面的值利用定时器加载
上传后，表格loading结束，让百分比div消失，清除定时器
// 上传前，让表格loading，让百分比div展示
beforeFileUpload(){
this.loading = true;
this.isShowLoading = true;
},
// 上传时，百分比里面的值利用定时器加载
onProgressFile(){
let n=0;
let result = document.getElementById('result');
let load = document.getElementById('load');
this.timer = setInterval(function(){
if(n<100){
// n+=Math.floor(Math.round(Math.random()*(100-10)+10)/10);// 这里采用随机的两位数来模拟
n+=1;// 这里采用+1来模拟
if(n>100){n=100};
result.innerText=n+"%";
load.style.width=n*3+'px';
}
},100)
},
//上传后，表格loading结束，让百分比div消失，清除定时器
onSuccessFile(response) {
clearInterval(this.timer);
this.timer = null
// 这里写你自己的代码
this.loading = false;
this.isShowLoading = false;
},
