列表加载增加 loading

src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cloudCoachList">
     <div class="name">乐谱</div>
-    <div class="listCon">
+    <div class="listCon" v-loading="loading">
       <div class="list" v-for="item in listData" :key="item.id">
         <div>曲目名称：{{ item.name }}</div>
         <ElButton @click="handleUpdate(item.id)">添加</ElButton>
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { ElButton } from "element-plus"
+import { ElButton, ElLoading } from "element-plus"
 import { getMaterialQueryPage } from "@/api/pptOperate"
 import { httpAjax } from "@/plugins/httpAjax"
 import { ref } from "vue"
@@ -23,7 +23,12 @@ function handleUpdate(id: string) {
   emit("update", id)
 }
 
+const vLoading = ElLoading.directive
+const loading = ref(false)
+
 const listData = ref<any[]>([])
+
+loading.value = true
 httpAjax(getMaterialQueryPage, {
   type: "MUSIC",
   sourceType: 2,
@@ -31,6 +36,7 @@ httpAjax(getMaterialQueryPage, {
   page: 1,
   rows: 20
 }).then(res => {
+  loading.value = false
   if (res.code === 200) {
     listData.value = res.data.rows
   }