Web Front-end
JS Tutorial
About how element-ui in vue implements the rolling loading method in the table
About how element-ui in vue implements the rolling loading method in the table
Now I will share with you a vue element-ui table table rolling loading method, which has a good reference value and I hope it will be helpful to everyone.
Add global registration event to listen for scrolling events
window.Vue.directive('loadmore', {
bind(el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
let sign = 100
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign) {
binding.value()
}
})
}
})sign is used to mark the position
Directly letting scrollDistance === sign does not guarantee that it will be triggered every time, so it is represented by an interval. The issue of frequent triggering will be dealt with later.
Add event
Add a custom event to the table that needs to be loaded wirelessly, v-loadmore="loadMore". Define the triggered event in methods
loadMore () {
if (this.loadSign) {
this.loadSign = false
this.page++
if (this.page > 10) {
return
}
setTimeout(() => {
this.loadSign = true
}, 1000)
console.log('到底了', this.page)
}
}this.loadSign is used to mark whether the page continues to increase
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement the select drop-down list through Vue.js, the specific operations are as follows
The above is the detailed content of About how element-ui in vue implements the rolling loading method in the table. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use Vue and Element-UI to implement lazy loading of images
Jul 22, 2023 pm 04:05 PM
How to use Vue and Element-UI to implement lazy loading of images Lazy loading (Lazyloading) is a technology that delays loading of images, which can effectively increase page loading speed, save bandwidth and improve user experience. In the Vue project, we can use Element-UI and some plug-ins to implement the image lazy loading function. This article will introduce how to use Vue and Element-UI to implement lazy loading of images, and attach corresponding code examples. 1. Install the necessary dependencies before starting
How to implement calendar and date selection functions using Vue and Element-UI
Jul 22, 2023 pm 05:30 PM
Introduction to how to use Vue and Element-UI to implement calendar and date selection functions: In front-end development, calendar and date selection functions are one of the very common requirements. Vue and Element-UI are a pair of very powerful development tools. Combining them can easily implement calendar and date selection functions. This article will introduce how to use Vue and Element-UI to create a simple calendar and date selection function, and provide code examples to help readers understand the specific steps and methods of implementation. Preparation: at the beginning
A complete guide to implementing file upload in Vue (axios, element-ui)
Jun 09, 2023 pm 04:12 PM
A complete guide to implementing file upload in Vue (axios, element-ui) In modern web applications, file upload has become a basic function. Whether uploading avatars, pictures, documents or videos, we need a reliable way to upload files from the user's computer to the server. This article will provide you with a detailed guide on how to use Vue, axios and element-ui to implement file upload. What is axiosaxios is a prom based
How to use Vue and Element-UI to implement data filtering and search functions
Jul 21, 2023 pm 08:40 PM
How to use Vue and Element-UI to implement data filtering and search functions. In modern web development, data filtering and search functions are very common and important requirements. Vue and Element-UI are currently very popular front-end frameworks. They provide many powerful tools and components that can help us easily implement data filtering and search functions. This article will introduce how to use Vue and Element-UI to implement these functions, and provide detailed code examples. First, we need to prepare a
How to create a responsive web interface using Vue and Element-UI
Jul 20, 2023 pm 11:01 PM
How to create a responsive web interface using Vue and Element-UI In web development, responsive design is an essential technology. Vue.js and Element-UI are two very popular front-end frameworks. They both provide rich tools and components to build modern responsive web interfaces. This article will introduce how to use Vue and Element-UI to create a responsive web interface, and will present the specific implementation process through code examples. First, we need to make sure Vu is installed
How to use Vue and Element-UI to implement message notification function
Jul 21, 2023 pm 12:40 PM
How to use Vue and Element-UI to implement message notification functions. With the continuous development of front-end technology, more and more websites and applications need to implement message notification functions in order to display important information to users in a timely manner. In Vue development, this function can be quickly realized by combining the Element-UI framework. This article will introduce in detail how to use Vue and Element-UI to implement the message notification function, and provide relevant code examples. 1. Preparation work is implemented using Vue and Element-UI
How to use Vue and Element-UI to group and summarize data
Jul 21, 2023 pm 02:37 PM
How to use Vue and Element-UI to group and summarize data. In front-end development, we often encounter situations where we need to group and summarize data. Vue is a very popular JavaScript framework, and Element-UI is a component library based on Vue. It provides a rich set of UI components that can help us quickly build pages. This article will introduce how to use Vue and Element-UI to group and summarize data, and illustrate it with code examples. Preparatory work
How to use Vue and Element-UI to implement drag-and-drop sorting function
Jul 22, 2023 pm 04:12 PM
How to use Vue and Element-UI to implement drag-and-drop sorting function Preface: In web development, drag-and-drop sorting function is a common and practical function. This article will introduce how to use Vue and Element-UI to implement the drag-and-drop sorting function, and demonstrate the implementation process through code examples. 1. Environment setup and installation Node.js Before starting, you need to install Node.js. You can visit https://nodejs.org/ to download and install the version corresponding to the operating system. Install VueCL
