overflow-x: auto;导致 List 无法正确地判断滚动容器。解决方法是去除该样式

src/views/ebiz/billingDetail/billingDetail.vue

@@ -47,7 +47,9 @@
       </div>
     </div>
     <div class="table">
-      <tableDetail :theads="theads" :tableData="tableData"></tableDetail>
+      <van-list v-model="loading" :finished="finished" @load="queryOutOrderListFunc" :immediate-check="false" finished-text="没有更多数据了">
+        <tableDetail :theads="theads" :tableData="tableData"></tableDetail>
+      </van-list>
     </div>
 
     <!-- 二级机构筛选栏 -->
@@ -115,8 +117,10 @@ export default {
       maxDate: new Date(),
       filterDate: '',
       postDate: '', //实际给后台传的时间
+      loading: false,
+      finished: false,
       pageNum: 1,
-      pageSize: 10,
+      pageSize: 5,
       manageLv: 1, //当前人机构等级
       // 二级机构筛选是否显示
       isOrgLv2ConditionShow: false,
@@ -168,12 +172,16 @@ export default {
         this.postDate = date.year + '-' + date.month + '-' + date.date
       }
       this.currentIndex = index == 0 ? 1 : 0
-      this.queryOutOrderList()
+      this.pageNum = 1
+      this.tableData = []
+      this.queryOutOrderListFunc()
     },
     //时间筛选
     onDateConfirm(data) {
       this.postDate = data
-      this.queryOutOrderList()
+      this.pageNum = 1
+      this.tableData = []
+      this.queryOutOrderListFunc()
     },
     async initData() {
       // 初始化年份筛选数据
@@ -204,7 +212,7 @@ export default {
           this.OrgLv2Name = this.OrgLv2s[0].name
           this.OrgLv2Code = this.OrgLv2s[0].code
           // this.orgCode = this.OrgLv2s[0].code
-          this.onOrgLv2ConditionConfirm(this.OrgLv2Name)
+          this.onOrgLv2ConditionConfirmGetData(this.OrgLv2Name)
         } else {
           this.$toast(res.resultMessage)
         }
@@ -213,15 +221,15 @@ export default {
         this.OrgLv2Name = this.OrgLv2s[0].name
         this.OrgLv2Code = this.OrgLv2s[0].code
         // this.orgCode = this.OrgLv2s[0].code
-        this.onOrgLv2ConditionConfirm(this.OrgLv2Name)
+        this.onOrgLv2ConditionConfirmGetData(this.OrgLv2Name)
       }
-
+      this.queryOutOrderListFunc()
       // 查询默认数据
       //   const result = await this.getRankData()
       //   this.setSummarizingData(result)
     },
     // 查询列表数据
-    queryOutOrderList() {
+    queryOutOrderListFunc() {
       queryOutOrderList({
         appntDate: this.postDate,
         distCode: this.OrgLv2Code,
@@ -232,11 +240,52 @@ export default {
       }).then(res => {
         if (res.result == 0) {
           if (res.content) {
+            this.pageNum++
+            //点击其他筛选条件，finished会变为true，需要重置finished数据全部加载完成--false
+            this.finished = false
+            //当下一页为0时  表示全部数据加载完毕
+            if (res.content.nextPage == 0) {
+              this.finished = true
+            }
             this.tableData = this.tableData.concat(res.content.list)
+            // this.tableData.push(...res.content.list)
+            this.loading = false
           }
         }
       })
     },
+    // 筛选二级机构-区--数据加载
+    async onOrgLv2ConditionConfirmGetData(data) {
+      this.isOrgLv2ConditionShow = false
+      let OrgLv2 = this.OrgLv2s.find(item => item.name === data)
+      if (OrgLv2) {
+        this.OrgLv2Code = OrgLv2.code
+        this.params.manageCode = this.OrgLv2Code
+        this.params.manageLv = '02'
+      }
+      if (data === '全国') {
+        this.params.manageCode = '86'
+        this.params.manageLv = '01'
+      }
+      this.OrgLv2Name = data
+      this.OrgLv4Name = '全部'
+      this.OrgLv3Name = '全部'
+      this.OrgLv3Code = ''
+      this.areaCode = ''
+      // // 点击其他筛选条件-重置当前页为第一页
+      // this.pageNum = 1
+      // this.tableData = []
+      // this.queryOutOrderListFunc()
+      // 查询三级机构
+      const res = await getOrgList({
+        bussinessType: 'normal',
+        manageCode: this.OrgLv2Code,
+        manageLv: '05'
+      })
+      this.OrgLv3s.splice(0)
+      this.OrgLv3s.push(...res.content)
+      //   this.setRankData()
+    },
     // 筛选二级机构-区
     async onOrgLv2ConditionConfirm(data) {
       this.isOrgLv2ConditionShow = false
@@ -255,9 +304,10 @@ export default {
       this.OrgLv3Name = '全部'
       this.OrgLv3Code = ''
       this.areaCode = ''
-
+      // 点击其他筛选条件-重置当前页为第一页
       this.pageNum = 1
-      this.queryOutOrderList()
+      this.tableData = []
+      this.queryOutOrderListFunc()
       // 查询三级机构
       const res = await getOrgList({
         bussinessType: 'normal',
@@ -285,9 +335,10 @@ export default {
       this.OrgLv3Name = '全部'
       // this.OrgLv2Code = ''
       this.areaCode = ''
-
+      // 点击其他筛选条件-重置当前页为第一页
       this.pageNum = 1
-      this.queryOutOrderList()
+      this.tableData = []
+      this.queryOutOrderListFunc()
       // 查询四级机构
       const res = await getOrgList({
         bussinessType: 'normal',
@@ -314,8 +365,10 @@ export default {
       }
       // this.OrgLv2Code = ''
       // this.OrgLv3Code = ''
+      // 点击其他筛选条件-重置当前页为第一页
       this.pageNum = 1
-      this.queryOutOrderList()
+      this.tableData = []
+      this.queryOutOrderListFunc()
       //   this.setRankData()
     }
   },
@@ -366,7 +419,8 @@ export default {
   width: 0px;
 }
 .table {
-  overflow-x: auto;
+  //overflow-x: auto;导致 List 无法正确地判断滚动容器。解决方法是去除该样式
+  // overflow-x: auto;
   margin: 5px;
   box-sizing: border-box;
   background: #fff;