下拉分页

src/utils/common.js

@@ -0,0 +1,39 @@
+// 防抖
+export const Debounce = (fn, t) => {
+  let delay = t || 500;
+  let timer;
+  console.log(fn)
+  console.log(typeof fn)
+  return function () {
+    let args = arguments;
+    if(timer){
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = null;
+      fn.apply(this, args);
+    }, delay);
+  }
+};
+
+
+// 节流
+export const Throttle = (fn, t) => {
+  let last;
+  let timer;
+  let interval = t || 500;
+  return function () {
+    let args = arguments;
+    let now = +new Date();
+    if (last && now - last < interval) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        last = now;
+        fn.apply(this, args);
+      }, interval);
+    } else {
+      last = now;
+      fn.apply(this, args);
+    }
+  }
+};

src/views/career/zhiyuan/components/recommend.vue

@@ -59,7 +59,7 @@
       </div>
     </div>
     <div class="zhiyuan-list">
-      <zhiyuan-list :tableList="rows" @apply="apply" :cols="cols" @expand="expand"></zhiyuan-list>
+      <zhiyuan-list  :tableList="rows" @apply="apply" :cols="cols" @expand="expand"></zhiyuan-list>
     </div>
     <div :class="{'active':show,'right_cart': true}" >
       <div class="btn-wrap" @click="show = !show">
@@ -94,6 +94,7 @@
 </template>
 <script>
 import FilterForm from '@/views/career/components/FilterForm';
+import { Debounce, Throttle } from '@/utils/common.js'
 import ZhiyuanList from '@/views/career/zhiyuan/components/zhiyuan-list';
 import { allMajor,getRecommendVoluntary,getVoluntaryMarjors,getVoluntaryHeaders,saveZhiyuan } from '@/api/webApi/professlib'
 export default {
@@ -133,9 +134,15 @@ export default {
           { label: '保守型', value: '2' }
         ]
       },
+      pageForm: {
+        pageSize: 10,
+        pageNum:1
+      },
+      total: 0,
       rows: [],
       cols: [],
-      selectedList:[]
+      selectedList:[],
+      loading:false
     }
   },
   created() {
@@ -145,6 +152,18 @@ export default {
       this.getCols()
     })
   },
+  mounted() {
+    let dom = document.querySelector(".el-table__body-wrapper");
+    console.log(dom)
+    dom.addEventListener("scroll", (v) => {
+      const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
+      console.log('scrollDistance',scrollDistance)
+      // 判断是否到底，可以加载下一页
+      if (scrollDistance <= 10) {
+        this.load()
+      }
+    });
+  },
   watch:{
     filter_form:{
       deep:true,
@@ -213,6 +232,20 @@ export default {
     },
   },
   methods: {
+    load() {
+      if (Math.ceil(this.total / this.pageForm.pageSize) > this.pageForm.pageNum) {
+        // 标识正在请求
+
+        // 加载下一页方法
+        if(!this.loading){
+          //当前页数小于总页数就请求
+          this.pageForm.pageNum++; //当前页数自增
+          this.getList('push')
+        }
+      }else {
+        this.$message.warning("已经见底了 ～");
+      }
+    },
     save(){
       const wishes = this.selectedList.map(item =>{
         return {
@@ -246,7 +279,7 @@ export default {
         name: ''
       }
       saveZhiyuan(data).then(res =>{
-        console.log(res)
+        this.$router.push({ name:'VolunteerList' })
       })
     },
     apply(item,index) {
@@ -279,7 +312,8 @@ export default {
           this.cols = res.data
       })
     },
-    getList() {
+    getList(type) {
+      this.loading = true
       const data = {
         batchName: this.batch.name,
         majors: this.checkedList,
@@ -299,20 +333,18 @@ export default {
           // "type": "string"
         },
       }
-      const pageForm = {
-        pageSize: 10,
-        pageNum:1
-      }
-      getRecommendVoluntary({ ...data }, { ...pageForm }).then(res =>{
+      getRecommendVoluntary({ ...data }, { ...this.pageForm }).then(res =>{
         console.log(res)
-        const rows = res.rows.map(item => {
+        this.total = res.total
+        let rows = {}
+        rows = res.rows.map(item => {
           item.isExpand = false
           item.majors = []
           return item
         })
         // 回显
         if(this.selectedList.length) {
-           this.rows = rows.map(row => {
+          rows = rows.map(row => {
            const flagIndex =  this.selectedList.findIndex(selected => {
               return selected.recruitPlan.collegeCode == row.recruitPlan.collegeCode
             })
@@ -322,10 +354,14 @@ export default {
               return this.selectedList[flagIndex]
             }
           })
-        } else {
-          this.rows = rows
         }
-
+        if(type == 'push') {
+          this.rows.push(...rows)
+          return
+        }
+        this.rows = rows
+      }).finally(_ => {
+        this.loading = false
       })
     },
     getVoluntaryMarjors(item) {

src/views/career/zhiyuan/components/zhiyuan-list.vue

@@ -1,84 +1,9 @@
 <template>
-  <div>
-    <dynamic-table :rows="tableList" :columns="columns" @expand-change="expand" >
-      <template #expand="{row,$index}">
-        <div>
-          <dynamic-table :columns="majorCol" :show-header="false" :rows="row.majors">
-            <template #t0="{row}">
-              <!--    录取概率 -->
-              <div>
-                <p class="mb10"><span class="f18">{{ row.enrollRatio }}</span>%</p>
-                <p class="mb10 f-9b f12">{{ row.enrollRatioText }}</p>
-                <p>
-                  <el-tag type="success">冲</el-tag>
-<!--                  <el-tag type="success">稳</el-tag>-->
-<!--                  <el-tag type="success">保</el-tag>-->
-                </p>
-              </div>
-            </template>
-            <template #t1="{row}">
-              <div>
-                <p class="mb10"><span class="pointer">{{ row.marjorName }}</span></p>
-                <p class="f-9b f12">代码 {{ row.marjorBelongs }}</p>
-              </div>
-            </template>
-            <template #t2="{row}">
-              <div>
-                <p><span class="f18">{{ row.planCount || '-' }}</span>人</p>
-                <p class="f-9b f12">{{ `${row.xuezhi} ￥${row.xuefei}` }}</p>
-              </div>
-            </template>
-            <template #t3="{row}">
-              <div class="f14">
-                <p>录取人数</p>
-                <p>线差</p>
-                <p>最低分</p>
-                <p>最低位次</p>
-              </div>
-            </template>
-            <template #t4="{row}">
-              <div class="f14">
-                <div v-if="row.histories[0]">
-                  <p>{{ row.histories[0].numReal || '-' }}</p>
-                  <p>{{ row.histories[0].lineDiff || '-' }}</p>
-                  <p>{{ row.histories[0].score || '-' }}</p>
-                  <p>{{ row.histories[0].seat || '-' }}</p>
-                </div>
-                <span v-else>暂无</span>
-              </div>
-            </template>
-            <template #t5="{row}">
-              <div class="f14">
-                <div v-if="row.histories[1]">
-                  <p>{{ row.histories[1].numReal || '-' }}</p>
-                  <p>{{ row.histories[1].lineDiff || '-' }}</p>
-                  <p>{{ row.histories[1].score || '-' }}</p>
-                  <p>{{ row.histories[1].seat || '-' }}</p>
-                </div>
-                <span v-else>暂无</span>
-              </div>
-            </template>
-            <template #t6="{row}">
-              <div class="f14">
-                <div v-if="row.histories[2]">
-                  <p>{{ row.histories[2].numReal || '-' }}</p>
-                  <p>{{ row.histories[2].lineDiff || '-' }}</p>
-                  <p>{{ row.histories[2].score || '-' }}</p>
-                  <p>{{ row.histories[2].seat || '-' }}</p>
-                </div>
-                <span v-else>暂无</span>
-              </div>
-            </template>
-            <template #t7="{row}">
-              <el-button :type="row.selected ? 'danger' : 'primary'" @click="apply(row,$index)"> {{row.selected ?'取消' :  '填报' }}</el-button>
-            </template>
-          </dynamic-table>
-        </div>
-      </template>
+    <dynamic-table   height="800px"  :rows="tableList" :columns="columns" @expand-change="expand" >
       <template #t0="{row}">
         <!--    录取概率 -->
         <div>
-          <p class="mb10"><span class="f18">{{ row.enrollRatio }}</span>%</p>
+<!--          <p class="mb10"><span class="f18">{{ row.enrollRatio }}</span>%</p>-->
           <p class="mb10 f-9b f12">{{ row.enrollRatioText }}</p>
           <p>
             <el-tag type="danger" v-if="row.pickType == 0">冲</el-tag>
@@ -90,11 +15,11 @@
       <template #t1="{row}">
         <!-- 院校 -->
         <div>
-          <p class="mb10"><span class="pointer">{{ `${row.university.name}(${row.recruitPlan.collegeCode })` || '' }}</span></p>
+          <p class="mb10"><span class="pointer">{{ `${row.university.name}` || '' }}</span></p>
           <p class="mb5 f-9b f12">{{ row.university.features.split(',').join(' ') }}</p>
           <p class="mb5 f-9b f12">{{ row.university.location }} {{ row.university.cityName }}
             排名{{ row.university.ranking }}</p>
-<!--          <p class="f-9b f12">代码 {{ row.recruitPlan.collegeCode }}</p>-->
+          <p class="f-9b f12">代码 {{ row.recruitPlan.collegeCode }}</p>
         </div>
       </template>
       <template #t2="{row}">
@@ -108,7 +33,7 @@
         <!--   历年 -->
         <div class="f14">
           <p>录取人数</p>
-          <p>线差</p>
+<!--          <p>线差</p>-->
           <p>最低分</p>
           <p>最低位次</p>
         </div>
@@ -117,7 +42,7 @@
         <div class="f14">
           <div v-if="row.histories[0]">
             <p>{{ row.histories[0].numReal || '-' }}</p>
-            <p>{{ row.histories[0].lineDiff || '-' }}</p>
+<!--            <p>{{ row.histories[0].lineDiff || '-' }}</p>-->
             <p>{{ row.histories[0].score || '-' }}</p>
             <p>{{ row.histories[0].seat || '-' }}</p>
           </div>
@@ -128,7 +53,7 @@
         <div class="f14">
           <div v-if="row.histories[1]">
             <p>{{ row.histories[1].numReal || '-' }}</p>
-            <p>{{ row.histories[1].lineDiff || '-' }}</p>
+<!--            <p>{{ row.histories[1].lineDiff || '-' }}</p>-->
             <p>{{ row.histories[1].score || '-' }}</p>
             <p>{{ row.histories[1].seat || '-' }}</p>
           </div>
@@ -139,7 +64,7 @@
         <div class="f14">
           <div v-if="row.histories[2]">
             <p>{{ row.histories[2].numReal || '-' }}</p>
-            <p>{{ row.histories[2].lineDiff || '-' }}</p>
+<!--            <p>{{ row.histories[2].lineDiff || '-' }}</p>-->
             <p>{{ row.histories[2].score || '-' }}</p>
             <p>{{ row.histories[2].seat || '-' }}</p>
           </div>
@@ -150,9 +75,81 @@
         <p type="primary"> {{ `共有专业${row.recruitPlan.majorCount}个` }}</p>
         <p class="f12 f-primary" v-show="row.majors.filter(major => {return major.selected}).length">  已填  <span>{{ row.majors.filter(major => {return major.selected}).length }}</span> </p>
       </template>
+      <template #expand="{row,$index}">
+        <div>
+          <dynamic-table :columns="majorCol" :show-header="false" :rows="row.majors">
+            <template #t0="{row}">
+              <!--    录取概率 -->
+              <div>
+<!--                <p class="mb10"><span class="f18">{{ row.enrollRatio }}</span>%</p>-->
+                <p class="mb10 f-9b f12">{{ row.enrollRatioText }}</p>
+                <p>
+                  <el-tag type="success">冲</el-tag>
+                  <!--                  <el-tag type="success">稳</el-tag>-->
+                  <!--                  <el-tag type="success">保</el-tag>-->
+                </p>
+              </div>
+            </template>
+            <template #t1="{row}">
+              <div>
+                <p class="mb10"><span class="pointer">{{ row.marjorName }}</span></p>
+                <p class="f-9b f12">代码 {{ row.marjorBelongs }}</p>
+              </div>
+            </template>
+            <template #t2="{row}">
+              <div>
+                <p><span class="f18">{{ row.planCount || '-' }}</span>人</p>
+                <p class="f-9b f12">{{ `${row.xuezhi} ￥${row.xuefei}` }}</p>
+              </div>
+            </template>
+            <template #t3="{row}">
+              <div class="f14">
+                <p>录取人数</p>
+<!--                <p>线差</p>-->
+                <p>最低分</p>
+                <p>最低位次</p>
+              </div>
+            </template>
+            <template #t4="{row}">
+              <div class="f14">
+                <div v-if="row.histories[0]">
+                  <p>{{ row.histories[0].numReal || '-' }}</p>
+<!--                  <p>{{ row.histories[0].lineDiff || '-' }}</p>-->
+                  <p>{{ row.histories[0].score || '-' }}</p>
+                  <p>{{ row.histories[0].seat || '-' }}</p>
+                </div>
+                <span v-else>暂无</span>
+              </div>
+            </template>
+            <template #t5="{row}">
+              <div class="f14">
+                <div v-if="row.histories[1]">
+                  <p>{{ row.histories[1].numReal || '-' }}</p>
+<!--                  <p>{{ row.histories[1].lineDiff || '-' }}</p>-->
+                  <p>{{ row.histories[1].score || '-' }}</p>
+                  <p>{{ row.histories[1].seat || '-' }}</p>
+                </div>
+                <span v-else>暂无</span>
+              </div>
+            </template>
+            <template #t6="{row}">
+              <div class="f14">
+                <div v-if="row.histories[2]">
+                  <p>{{ row.histories[2].numReal || '-' }}</p>
+<!--                  <p>{{ row.histories[2].lineDiff || '-' }}</p>-->
+                  <p>{{ row.histories[2].score || '-' }}</p>
+                  <p>{{ row.histories[2].seat || '-' }}</p>
+                </div>
+                <span v-else>暂无</span>
+              </div>
+            </template>
+            <template #t7="{row}">
+              <el-button :type="row.selected ? 'danger' : 'primary'" @click="apply(row,$index)"> {{row.selected ?'取消' :  '填报' }}</el-button>
+            </template>
+          </dynamic-table>
+        </div>
+      </template>
     </dynamic-table>
-  </div>
-
 </template>
 <script>
 import DynamicTable from '@/components/dynamic-table'
@@ -188,7 +185,8 @@ export default {
       this.cols.map((item, index) => {
         columns.push({
           label: item,
-          slotBody: 't' + index
+          slotBody: 't' + index,
+          width: index >= 2 || index == 0 ? 100+'px' : ''
         })
       })
       return columns
@@ -197,7 +195,8 @@ export default {
       return this.cols.map((item, index) => {
         return {
           label: item,
-          slotBody: 't' + index
+          slotBody: 't' + index,
+          width: index >= 2 || index == 0 ? 100+'px' : ''
         }
       })
     },
@@ -208,7 +207,7 @@ export default {
     },
     apply(item,index) {
       this.$emit('apply',item,index)
-    }
+    },
   }
 }
 </script>
@@ -221,4 +220,11 @@ export default {
   padding-right: 0;
   padding-bottom: 0;
 }
+::v-deep .el-table__expand-icon{
+  font-size: 18px;
+  color: #666;
+  .el-icon-arrow-right{
+    font-weight: bold;
+  }
+}
 </style>