elementui实现数据懒加载

最新推荐文章于 2025-02-20 17:52:33 发布

原创最新推荐文章于 2025-02-20 17:52:33 发布 · 906 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种使用 Vue.js 实现的模拟前台数据加载与展示的方法，通过监听滚动条位置来判断是否加载更多数据，并展示了如何根据不同条件显示相应的图标和按钮。

模拟前台数据

<el-table  v-loading="loading" :data="tableData" ref="myTable"  :show-header="false" height="7.15rem" style="width: 100%">
        <el-table-column width="60">
          <template slot-scope="scope">
            <img src="../../assets/images/onemapNew/地裂缝_一般.png" v-if="scope.row.type_info==='normal'&& scope.row.dic_disaster_type1==='groundCrack'">
            <img src="../../assets/images/onemapNew/地裂缝_重要.png" v-if="scope.row.type_info==='important'&& scope.row.dic_disaster_type1==='groundCrack'">
            <img src="../../assets/images/onemapNew/地面塌陷_一般.png" v-if="scope.row.type_info==='normal'&& scope.row.dic_disaster_type1==='groundCollapse'">
            <img src="../../assets/images/onemapNew/地面塌陷_重要.png" v-if="scope.row.type_info==='important'&& scope.row.dic_disaster_type1==='groundCollapse'">
            <img src="../../assets/images/onemapNew/崩塌_一般.png" v-if="scope.row.type_info==='normal'&& scope.row.dic_disaster_type1==='collapse'">
            <img src="../../assets/images/onemapNew/崩塌_重要.png" v-if="scope.row.type_info==='important'&& scope.row.dic_disaster_type1==='collapse'">
            <img src="../../assets/images/onemapNew/滑坡_一般.png" v-if="scope.row.type_info==='normal'&& scope.row.dic_disaster_type1==='landslide'">
            <img src="../../assets/images/onemapNew/滑坡_重要.png" v-if="scope.row.type_info==='important'&& scope.row.dic_disaster_type1==='landslide'">
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <div>名称：{{scope.row.name}}</div>
            <div>灾害类型：{{scope.row.dic_disaster_name}}</div>
            <div>威胁人数：{{scope.row.threat_num}}人&#12288&#12288威胁财产：{{scope.row.threat_value}}万元</div>
            <div style="display: flex; flex-direction: row;justify-content: flex-end;">
              <el-button size="mini" style="padding: 5px" type="primary" @click="headClick(scope.row)">开始巡查</el-button>
              <el-button size="mini" style="padding: 5px" type="primary" @click="headTodayClick(scope.row)">巡查记录</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

获取table相关dom数据

 onloadData(){
      let that = this;
      let dom = that.$refs.myTable.bodyWrapper;
      dom.addEventListener("scroll", function() {
        const scrollDistance =dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        console.log(scrollDistance)
        if(scrollDistance <=0){//等于0证明已经到底，可以请求接口
          if(that.pageNum < that.currentPage){//当前页数小于总页数就请求
            this.pageNum++;//当前页数自增
            let params={
              uuid:that.userinfo.uuid,
              regioncode: that.userinfo.regioncode,
              token: that.userinfo.token,
              pagenum:that.pageNum,
              pagesize:that.pageSize,
              keywords: that.valueSearch
            }
            getwarndaily(params).then(res=>{
              if (res.code===200000){
                that.currentPage=res.data.count
                that.tableData = that.tableData.concat(res.data.data)//将请求回来的数据和当前展示的数据合并在一起
                that.loading=false
              }else{
                that.loading=false
              }
            }).catch(err=>{
              console.log(err)
              that.loading=false
            })

          }
        }
      })
    },