成都知名网站建设,合肥网站制作费用,网站开发及后期维护,青田网站建设需求#xff1a;elementui Table表格滚动分页#xff08;不使用分页组件#xff09;#xff0c;请求数据。
1、自定义加载更多数据的指令#xff0c;在utils文件夹中创建 loadMore.js
/*** 加载更多数据的指令*/
export default {install(Vue) {Vue.mixin({directives: …需求elementui Table表格滚动分页不使用分页组件请求数据。
1、自定义加载更多数据的指令在utils文件夹中创建 loadMore.js
/*** 加载更多数据的指令*/
export default {install(Vue) {Vue.mixin({directives: {loadmore: {bind(el, binding) {let bindTime nullclearTimeout(bindTime)// eslint-disable-next-line space-before-function-parenbindTime window.setTimeout(function () {var selectWrap el.querySelector(.el-table__body-wrapper)selectWrap.addEventListener(scroll,// eslint-disable-next-line space-before-function-parenfunction () {if (this.scrollTop 0) {binding.value(up, this)return false}if (this.clientHeight this.scrollTop 1 this.scrollHeight) {binding.value(down, this)}},false)}, 200)}}}})}
}2、在main.js中添加以下代码
import loadMore from ./utils/loadMore;
Vue.use(loadMore);3、组件中使用
// 该处涉及项目其他属性参考elementui文档 v-loadMore即自定义指令
templateel-table :loadingisLoading v-loadmoregetData/el-table
/templatedata() {return {isLoading:false,pageSize: 30,pageNum: 1,total: 0,tableData: []}
}methods: {// 请求数据async getData(a) {this.pageNum 1if (a down) {this.isLoading truevar params {page: this.pageNum,pageSize: this.pageSize,// 其他参数...}var res await getDataApi(params)this.isLoading falseif (res) {this.total res.panelData.totalif (this.total this.tableData.length) {this.tableData this.tableData.concat(res.panelData.records)}}}}}
