table中有很多条数据,但又不想用分页的方式获取,可以通过下拉触发事件,加载更多数据
<el-table :data="tableData" border max-height=""500" ref="table">
<el-table-column type="index"></el-table-column>
<el-table-column label="短信内容" prop="templateNo" width="120"></el-table-column>
<el-table-column label="短信内容" prop="template"></el-table-column>
</el-table>
max-height必须要设置
export default {
data () {
return {
tableData: [],
size: 10,
total: null,
totalPage: null,
currentPage:1
}
},
created () {
this.getSmsTemplateList({params: '******' }).then(res => {
if (res.data.code == '200') {
this.tableTata = res.data.data
this.total = res.data.total
this.totalPage = Math.ceil(this.total / this.size)
}
})
},
mounted () {
let _this = this
let dom = document.querySelector('.el-table__body-wrapper')
dom.addEventListener('scroll', function() {
const scrollD = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
if (scrollD <= 0) {
if (_this.currentPage < _this.totalPage) {
_this.currentPage++
_this.getSmsTemplateList({params: '*****').then(res => {
if (res.data.code == '200') {
Array.prototype.push.apply(_this.tableData, res.data.data)
}
})
}
}
})
},
methods: {
getSmsTemplateList () {}
}
}
网友评论