representación de datos de tabla móvil vue
<div class="box_top2">
<el-table ref="table" v-loading="loading" max-height="500px" :data="tableData" border
style="width: 100%; text-align: center;">
<el-table-column align="center" prop="hcmName" label="姓名" width="110">
</el-table-column>
<el-table-column prop="dateTime" align="center" label="合同到期日期" width="150">
</el-table-column>
<el-table-column align="center" prop="diffDate" label="剩余天数" width="94">
</el-table-column>
</el-table>
</div>
export default {
props: ['deptCode'],
data() {
return {
tableDataList: [],
tableData: [],
finishedtext: "没有更多了",
//分页数据
finished: false,
pageSize: 10,
currentPage: 1,
deptCode: this.deptCode,
type: "1",
dom: null,
total: 0,
loading: true
}
},
watch: {
用于监视 下拉框 选项 传过来的数据 首页默认显示的数据 如没有下拉筛选按 直接在本页面 进行加载数据
deptCode: {
async handler(n) {
this.currentPage = 1
this.$refs.table.bodyWrapper.scrollTop = 0
getExpireShow({
pageSize: this.pageSize,
currentPage: this.currentPage,
type: this.type,
deptCode: this.deptCode,
}).then(res => {
this.tableData= res.data.list
this.totaldata = res.data.total
this.loading = false
})
}
}
},
created() {
获取传过来的 code
// console.log("获取code-----------", this.deptCode)
},
mounted() {
getExpireShow({
//传递过来的参数
pageSize: this.pageSize,
currentPage: this.currentPage,
type: this.type,
deptCode: this.deptCode,
}).then(res => {
this.tableData = res.data.list
this.total = res.data.total
this.loading = false
})
this.$nextTick(() => {
console.log(this.$refs.table.bodyWrapper);
this.dom = this.$refs.table.bodyWrapper
this.dom.addEventListener('scroll', () => {
// 表格滚动条滚动的距离
let scrollTop = this.dom.scrollTop
// 变量windowHeight是可视区的⾼度
// let windowHeight = this.dom.clientHeight
// 变量scrollHeight是滚动条的总⾼度
let scrollHeight = this.dom.scrollHeight
let clientHeight = this.dom.clientHeight
let scrollBottom = scrollHeight - scrollTop - clientHeight
console.log(scrollBottom);
if (scrollBottom <= 1) {
// 这里就是滚动条滚动到底部的时候
// 获取到的不是全部数据当滚动到底部继续获取新的数据
// 这里记住我们要把表格渲染的数据和获取到的全部数据分开, 等滑动到底部时我们在取10或者20条添加到渲染数据上
if (this.total <= this.tableData.length) {
if (this.total <= this.pageSize) {
Toast('已经到底啦！')
return
}
Toast('已经到底啦！')
return
} // 因为我们默认都是渲染20条数据,如果总数据没那么多就直接return出去
this.loading = true // 开启loading效果防止渲染速度慢用户乱点,导致页面崩溃
this.dom.scrollTop = this.dom.scrollTop - 30
this.pageNum++
getExpireShow({
pageSize: this.pageSize,
currentPage: this.currentPage,
type: this.type,
deptCode: this.deptCode,
}).then(res => {
// this.edit=res.data.edit
// // this.$forceUpdate()
// this.total=res.data.total
for (var i = 0; i < res.data.list.length; i++) {
this.tableData.push(res.data.list[i])
}
})
setTimeout(() => {
this.loading = false
}, 500)
}
})
})
},
}
ref="table" se usa para monitorear la altura del desplazamiento
this.$refs.table.bodyWrapper.scrollTop = 0