删除loading

src/views/course/components/KnowledgeGraphUi/foldInfoUi.vue

@@ -17,7 +17,7 @@
                 <div class="my-tag">本章资源</div>
               </div>
               <button class="my-button" @click.stop="emits('edit', item)" style="margin-right: 10px;">编辑</button>
-              <el-button type="danger" class="is-el-button" :loading="loading&&item.id===activeData.id" @click.stop="hanDel(item)" style="margin-right: 10px;">删除</el-button>
+              <my-btn :id="item.id" type="danger" class="is-el-button" style="margin-right: 10px;">删除</my-btn>
             </div>
           </template>
           <template #default>
@@ -40,8 +40,9 @@
                           <div class="my-tag" type="warning">{{ obj.totalclasshours }}学时</div>
                         </div>
                         <div class="tit-box-edit">
-                          <button class="my-button" @click.stop="emits('edit', obj)" style="margin-right: 10px;">编辑</button>
-                          <el-button type="danger" class="is-el-button" :loading="loading&&obj.id==activeData.id" my-type="error" @click.stop="hanDel(obj)">删除</el-button>
+                          <button class="my-button" @click.stop="emits('edit', obj)"
+                            style="margin-right: 10px;">编辑</button>
+                            <my-btn :id="obj.id" type="danger" class="is-el-button" style="margin-right: 10px;">删除</my-btn>
                         </div>
                       </div>
                     </div>
@@ -62,13 +63,24 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-defineProps(['foldInfoData','loading'])
+import { ElButton } from 'element-plus';
+import { ref, h, type SetupContext, withModifiers  } from 'vue'
+defineProps(['foldInfoData'])
 const emits = defineEmits(['add', 'del', 'edit'])
-const activeData = ref({id:undefined})
-function hanDel(o:any){
-  activeData.value = o
-  emits('del', o.id)
+
+const MyBtn = {
+  props: ['id'],
+  setup(props:{id:string}, context:SetupContext) {
+    const loading = ref(false)
+    const setLoading = (bool: boolean) => loading.value = bool
+    return ()=> h(ElButton, {
+      loading: loading.value,
+      onClick: withModifiers(function () { 
+        emits('del', props.id,setLoading)
+      }, ['stop']),
+      ...context.attrs,
+    }, context.slots)
+  }
 }
 </script>
 

src/views/course/courseChapters.vue

@@ -16,8 +16,7 @@
                 </div>
                 <div class="bottom">
                     <!-- 可折叠基本概念 -->
-                    <fold-info-ui :foldInfoData="foldInfoData" @add="showHide = true" @edit="hanEdit" @del="flodDel"
-                        :loading="foldDelLoading" />
+                    <fold-info-ui :foldInfoData="foldInfoData" @add="showHide = true" @edit="hanEdit" @del="flodDel" />
                     <FoldAdd v-model:is-d="showHide" v-if="showHide" :data="foldInfoData" @submit="foldAddSubmit" />
                     <FoldEdit v-model:is-d="showHide1" v-if="showHide1" :editData="activeEditData" :data="foldInfoData"
                         @submit="foldEditSubmit" />
@@ -91,9 +90,8 @@ function foldAddSubmit(data: any, updLoading: Function) {
     }).finally(() => updLoading(false))
 }
 //删除章节
-const foldDelLoading = ref(false)
-function flodDel(id: string) {
-    foldDelLoading.value = true
+function flodDel(id: string,setLoading:Function) {
+    setLoading(true)
     deleteSectionApi(id).then(() => {
         ElMessage({
             message: `删除成功`,
@@ -105,7 +103,7 @@ function flodDel(id: string) {
             message: `删除失败`,
             type: 'error'
         })
-    }).finally(() => foldDelLoading.value = false)
+    }).finally(() =>setLoading(false))
 }
 // 更新章节
 const showHide1 = ref(false)