模拟前台数据
<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}}人  威胁财产:{{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
})
}
}
})
},