课程推荐弹窗列表实现

src/components/courserecommended/CourseRecommended.vue

@@ -10,7 +10,7 @@
     width="80%"
     @cancel="handleCancel"
     @ok="handleCancel"
-    style="overflow-y:auto"
+    class="modal"
   >
   <div class="title">项目管理系列课</div>
   <dl>
@@ -26,7 +26,7 @@
       <!-- 表格 -->
       <div class="tableBox">
       <a-table style="border: 1px solid #f2f6fe" :columns="column" :data-source="data" 
-        :scroll="{ x: 1100 }" :pagination="false">
+        :scroll="{ x: 1100 }" :pagination="false" :loading="!tableLoading">
 
         <template #operation="{ record }">
           <a-space style="padding-right: 10px">
@@ -81,7 +81,8 @@ export default defineComponent({
     data:{
       type:Array,
       default:()=>([])
-    }
+    },
+    
   },
   components: {
     // OrgClassCheck,
@@ -90,9 +91,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
 
-
-
-// const loading = ref(false);
 // // 查询数据
 const searchData = ref({
   pageIndex: 1,
@@ -101,7 +99,7 @@ const searchData = ref({
   recommendTimeList: [],
 });
 const handelChangePage = (page, pageSize) => {
-  loading.value = false;
+  state.tableLoading = false;
   searchData.value.pageSize = pageSize;
   searchData.value.pageIndex = page;
   getList();
@@ -110,15 +108,15 @@ const getList = (num) => {
 //   if (num === 1) searchData.value.pageIndex = 1;
   boeRequest(RECOMMEND_PAGE, searchData.value)
     .then((res) => {
-  //     loading.value = true;
+      state.tableLoading = true;
       state.data = res?.result?.list || [];
       state.total = res?.result?.count || 0;
       console.log(state.data)
       
     })
-//     .catch(() => {
-//       loading.value = false;
-//     });
+    .catch(() => {
+      state.tableLoading = false;
+    });
 };
 getList()
 
@@ -127,6 +125,7 @@ getList()
     const store = useStore();
 
     const state = reactive({
+      tableLoading:false,
       imgList: [],
       categoryName: "",
       locationHref:
@@ -315,11 +314,15 @@ getList()
       value,
       searchData,
       getList,
+      handelChangePage,
     };
   },
 });
 </script>
 <style lang="scss">
+.modal{
+  overflow-y: auto;
+}
   .title{
     // background-color: rgba(255, 255, 255, 0);
     box-sizing: border-box;