vue给表格，弹窗以及整个页面加loading

给表格加loading

table表格有内置的loading,
:loading=“tableLoading”

js

//tableLoading 
const tableLoading = ref(false)

 const selectProjectAppraisalTargetSecondary = () => {
 	//tableLoading 
     tableLoading.value = true
     
     post(API.ability.selectProjectAppraisalTargetSecondary, {
             params: {
                 projectEvaluationId: props.stepId
             }
         })
         .then((res) => {
             //tableLoading 
             tableLoading.value = false
             
             expandform.treeList = treeData(
                 res.data,
                 "appraisalTargetId",
                 "parentId",
                 "children",
                 "parentId",
                 undefined
             )
             expandform.treeList.forEach((item, index) => {
                 let i = 100 % expandform.treeList.length
                 item.weight = parseInt(100 / expandform.treeList.length)
                 if (index === expandform.treeList.length - 1) {
                     item.weight = item.weight + i
                 }
                 item.children.forEach((itms, indx) => {
                     let n = item.weight % item.children.length
                     console.log(n)
                     itms.weight = parseInt(item.weight / item.children.length)
                     if (indx === item.children.length - 1) {
                         console.log(item.weight)
                         itms.weight = itms.weight + n
                     }
                 })

             })
         })
         .catch((res) => {
             //tableLoading 
             tableLoading.value = false
             
             message.error(res);
         });
 }

弹窗加loading

点击确定的时候不能多次点击用:

    
      
        
          
            
              
{{ searchForm.targetName }}
            
          
          
            
              
            
          
          
            
              
            
          
          
            
              
                启用
                停用
              
            
          
        
        

          提交
          取消
        
      
    
  

js:

const addVisible = ref(false);
let submitForm = reactive(submitForms)

//confirmLoading 
const confirmLoading = ref(false)

 // //校验
 const ruleForms = ref();
 let rules = reactive(rule)

 //关闭弹窗之后的回调
 const afterClose = () => {
     addVisible.value = false
     submitForm.name = "";
     submitForm.explain = "";
     submitForm.enabled = "true"
 }

 const statusChange = (e) => {
     console.log(e)
 }
 const addAppraisalTarget = () => {
 
     //confirmLoading 
     confirmLoading.value = true
     
     post(API.ability.addAppraisalTarget, {
             params: {
                 targetTemplateId: router.currentRoute.value.query.id,
                 parentId: searchForm.parentsId,
                 targetName: submitForm.name,
                 gistContent: submitForm.explain,
                 enabled: submitForm.enabled, //数据状态(启用:1或者true,停用:0或者false)
             },
         })
         .then((res) => {
         
         	 //confirmLoading 
             confirmLoading.value = false
             
             message.success('添加成功');
             addVisible.value = false;
             getAppraisalTargetListCreateProject()
         })
         .catch((res) => {
         
             //confirmLoading 
             confirmLoading.value = false
             
             message.error(res);
         });
 }

整个页面加loading

在提交的时候整个页面进行loading，防止多次点击

js:

let spinning = ref(false)

//获取上面头部列表
const getDetail = () => {

    spinning.value = true
    
    post(API.ability.selectProjectEvaluationDetailDesc, {
            params: {
                projectEvaluationId: listId.value,
            }
        })
        .then((res) => {
        
            spinning.value = false
            
            console.log(res.data)
            searchForm.tabList = res.data.projectAppraisalTargetDtoList ? res.data.projectAppraisalTargetDtoList.filter(item => {
                return item.isCheck
            }) : []
            searchForm.tabList.forEach(item => {
                item.tableData = []
            })
            if (searchForm.tabList.length > 0) {
                activeKey.value = searchForm.tabList[0].appraisalTargetId
                selectProjectEvaluationDetailCommon()
            }
        })
        .catch((res) => {
        
            spinning.value = false
            
            message.error(res);
        });
}