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

给表格加loading

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

<a-table
	 :columns="columns"
	 :data-source="expandform.treeList"
	 :pagination="false"
	 rowKey="appraisalTargetId"
	 :loading="tableLoading"
	>
	 <template #index="{ index }">{{ index + 1 }}</template>
	 <template #weight="{ record }">
	   <a-input
	     v-model:value="record.weight"
	     placeholder="请输入"
	     :disabled="currentType === '3'"
	   />
	 </template>
	
	 <!-- 顺序调整 -->
	 <template #sort="{ record, index }" v-if="currentType !== '3'">
	   <CaretDownOutlined @click="onSort(record, index, '1')" />
	   <CaretUpOutlined
	     @click="onSort(record, index, '2')"
	     style="margin-left: 10px"
	   />
	 </template>
</a-table>

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

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

 <a-spin :spinning="confirmLoading"></a-spin>

<a-modal
    v-model:visible="addVisible"
    :title="submitDialogText === '1' ? '新增体系指标' : '编辑体系指标'"
    :footer="null"
    :afterClose="afterClose"
    :destroyOnClose="true"
    class="ruleFormDialoglist"
    width="80%"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
        ref="ruleForms"
        :model="submitForm"
        :rules="rules"
        :label="{ span: 12, offset: 24 }"
        layout="horizontal"
        style="padding: 0 10px"
        class="ruleFormDialoglist"
      >
        <a-row :gutter="24">
          <a-col :span="24" v-if="searchForm.parentsId">
            <a-form-item label="父级指标名称:" v-if="searchForm.targetName">
              <div>{{ searchForm.targetName }}</div>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item ref="name" label="指标名称：" name="name">
              <a-input
                v-model:value="submitForm.name"
                placeholder="请输入指标名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="依据内容：" name="explain" ref="explain">
              <a-textarea
                v-model:value="submitForm.explain"
                placeholder="请输入依据内容"
                allowClear
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item ref="enabled" label="状态" name="enabled">
              <a-radio-group
                v-model:value="submitForm.enabled"
                @change="statusChange"
              >
                <a-radio :value="'true'">启用</a-radio>
                <a-radio :value="'false'">停用</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <div
          class="footButton"
          v-if="submitDialogText === '1' || submitDialogText === '2'"
        >
          <a-button type="primary" @click="onSubmit">提交</a-button>
          <a-button style="margin-left: 60px" @click="afterClose"
            >取消</a-button
          >
        </div>
      </a-form>
    </a-spin>
  </a-modal>

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，防止多次点击

<a-spin :spinning="spinning"></a-spin>

<template>
  <div class="EvaluatPage">
  
    <a-spin :spinning="spinning">
      <a-tabs v-model:activeKey="activeKey" @change="callback">
        <a-tab-pane
          v-for="item in searchForm.tabList"
          :key="item.appraisalTargetId"
        >
          <template #tab>
            <span>
              {{ item.appraisalTargetName }}
              <CheckOutlined />
            </span>
          </template>

          <a-table
            :columns="columns"
            :data-source="item.tableData"
            :pagination="false"
            rowKey="appraisalTargetId"
          >
            <template #index="{ index }">{{ index + 1 }}</template>
            <template #standard="{ record }">
              <div v-for="(item, index) in record.userList" :key="index">
                {{ item.score + ":" + item.standard }}
              </div>
            </template>
            <template #score="{ record }">
              <a-radio-group
                name="radioGroup"
                v-model:value="record.isSelectId"
              >
                <a-radio
                  :style="radioStyle"
                  :value="item.projectCriteriaId"
                  v-for="(item, index) in record.userList"
                  :key="index"
                  >{{ item.score }}</a-radio
                >
              </a-radio-group>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
      <div class="footButton" v-if="searchForm.tabList.length !== 0">
        <a-button
          type="primary"
          @click="onSubmitNext"
          v-if="
            searchForm.tabList.length > 0
              ? searchForm.tabList[searchForm.tabList.length - 1]
                  .appraisalTargetId !== activeKey
              : false
          "
          >下一步</a-button
        >
        <a-button type="primary" @click="onSubmit" v-else>提交</a-button>
      </div>
      <div class="footButton footImg" v-if="searchForm.tabList.length === 0">
        <div class="footBigBox">
          <div class="footImgBox"></div>
        </div>
        
        <a-button type="primary" @click="goBack">返回</a-button>
      </div>
    </a-spin>
    
  </div>
</template>

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);
        });
}