Element-UI 中 loading 的使用
表格加载
<el-table
:data="tableData"
row-key="target_id"
v-loading="loading"
element-loading-text="小主别急"
border
>
async getAllIndicatorNameList() {
this.loading = true
const result = await getAllIndicatorNameList(this.user_id,this.type,this.inputValue);
this.tableData = [];
let tempData = [];
if (result) {
this.loading = false;
if (result.MSGCODE == '007') {
tempData = result.RESULT;
tempData.map((item,index,array)=>{
this.tableData.push({"type_name":this.typeName,"target_id":item.TARGET_INST_ID, "target_name":item.TARGET_INST_NAME, "status":item.STATUS,"target_donc":item.TARGET_INST_DONC});
});
}
} else {
Toast('服务器异常')
this.loading = false;
}
}
全屏加载
async updateIndicatorNameList() {
const loading = this.$loading({
lock: true,//lock的修改符--默认是false
text: '小主别急',//显示在加载图标下方的加载文案
// background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
target: document.body//loadin覆盖的dom元素节点
});
const result = await updateIndicatorNameList(this.user_id,this.type,this.submitData);
if (result) {
//成功回调函数停止加载
loading.close()
if (result.MSGCODE == '007') {
// Toast('操作成功');
this.$router.push({path:"/localIndicators"});
}
} else {
Toast('服务器异常')
loading.close()
}
}