首頁 web前端 H5教程 element-ui如何操作table滾動效果

element-ui如何操作table滾動效果

Mar 27, 2018 pm 05:37 PM
element-ui table 捲動

這次帶給大家element-ui如何操作table滾動效果,element-ui操作table滾動的注意事項有哪些,下面就是實戰案例,一起來看一下。

新增全域註冊事件,用來監聽捲動事件

window.Vue.directive('loadmore', {
 bind(el, binding) {
 const selectWrap = el.querySelector('.el-tablebody-wrapper')
 selectWrap.addEventListener('scroll', function() {
  let sign = 100
  const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
  if (scrollDistance <= sign) {
  binding.value()
  }
 })
 }
})
登入後複製

sign 用來標記位置

直接讓scrollDistance === sign 並不能保證每次都會觸發,所以用區間表示。後續會處理頻繁觸發問題。

新增事件

為需要無線載入的表格新增自訂事件,v-loadmore= ”loadMore」。在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 用於標記page是否繼續遞增

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

建議閱讀:

在Vue中使用Compass

#整合UEditor富文本編輯器的方法

以上是element-ui如何操作table滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
如何使用Vue和Element-UI實現圖片懶載入功能 如何使用Vue和Element-UI實現圖片懶載入功能 Jul 22, 2023 pm 04:05 PM

如何使用Vue和Element-UI實現圖片懶載入功能懶載入(Lazyloading)是一種透過延遲載入圖片的技術,可以有效提升頁面載入速度,節省頻寬並改善使用者體驗。在Vue專案中,我們可以藉助Element-UI和一些外掛程式來實現圖片懶載入功能。本文將介紹如何使用Vue和Element-UI來實現圖片懶加載,並附上對應的程式碼範例。一、安裝必要的依賴在開始之

JavaScript 如何實作捲動到指定元素位置的功能? JavaScript 如何實作捲動到指定元素位置的功能? Oct 22, 2023 am 08:12 AM

JavaScript如何實現捲動到指定元素位置的功能?在網頁中,當我們需要將使用者的視線聚焦到某個特定的元素位置時,我們可以使用JavaScript來實現滾動到指定元素位置的功能。本文將介紹如何透過JavaScript實現此功能,並提供對應的程式碼範例。首先,我們需要取得目標元素的位置資訊。可以使用Element.getBoundingClient

如何使用Vue和Element-UI實現日曆和日期選擇功能 如何使用Vue和Element-UI實現日曆和日期選擇功能 Jul 22, 2023 pm 05:30 PM

如何使用Vue和Element-UI實現日曆和日期選擇功能簡介:在前端開發中,日曆和日期選擇功能是非常常見的需求之一。 Vue和Element-UI是一對非常強大的開發工具,結合它們可以輕鬆實現日曆和日期選擇功能。本文將介紹如何使用Vue和Element-UI來建立一個簡單的日曆和日期選擇功能,並提供程式碼範例,幫助讀者了解實現的特定步驟和方法。準備工作:在開始

如何使用Vue和Element-UI實現資料的篩選和搜尋功能 如何使用Vue和Element-UI實現資料的篩選和搜尋功能 Jul 21, 2023 pm 08:40 PM

如何使用Vue和Element-UI實現資料的篩選和搜尋功能在現代W​​eb開發中,資料的篩選和搜尋功能是非常常見和重要的需求。 Vue和Element-UI是目前非常受歡迎的前端框架,它們提供了許多強大的工具和元件,可以幫助我們輕鬆實現資料的篩選和搜尋功能。本文將介紹如何使用Vue和Element-UI來實現這些功能,並提供詳細的程式碼範例。首先,我們需要準備一個用

Vue實作檔案上傳的完整指南(axios、element-ui) Vue實作檔案上傳的完整指南(axios、element-ui) Jun 09, 2023 pm 04:12 PM

Vue實作檔案上傳的完整指南(axios、element-ui)在現代Web應用程式中,檔案上傳已成為一項基本的功能。無論是上傳頭像、圖片、文件或視頻,我們都需要一個可靠的方法來將文件從用戶的電腦上傳到伺服器中。本文將為您提供一份詳細的指南,介紹如何使用Vue、axios和element-ui來實現檔案上傳。什麼是axiosaxios是一個基於prom

如何使用Vue和Element-UI建立響應式網頁介面 如何使用Vue和Element-UI建立響應式網頁介面 Jul 20, 2023 pm 11:01 PM

如何使用Vue和Element-UI創建響應式網頁介面在Web開發中,響應式設計是一種不可或缺的技術。 Vue.js和Element-UI是兩個非常受歡迎的前端框架,它們都提供了豐富的工具和元件來建立現代化的響應式網頁介面。本文將介紹如何使用Vue和Element-UI來建立響應式網頁介面,並將透過程式碼範例來呈現具體的實作流程。首先,我們需要確保已經安裝了Vu

如何使用Vue和Element-UI實現資料的分組和匯總 如何使用Vue和Element-UI實現資料的分組和匯總 Jul 21, 2023 pm 02:37 PM

如何使用Vue和Element-UI實現資料的分組和匯總在前端開發中,我們經常會遇到需要對資料進行分組和匯總的情況。 Vue是一個非常受歡迎的JavaScript框架,而Element-UI則是一個基於Vue的元件庫,它提供了豐富的UI元件,能夠幫助我們快速建立頁面。本文將介紹如何使用Vue和Element-UI實現資料的分組和匯總,並透過程式碼範例來說明。準備工

如何使用Vue和Element-UI實現訊息通知功能 如何使用Vue和Element-UI實現訊息通知功能 Jul 21, 2023 pm 12:40 PM

如何使用Vue和Element-UI實現訊息通知功能隨著前端技術的不斷發展,越來越多的網站和應用程式需要實現訊息通知功能,以便及時向用戶展示重要的資訊。在Vue開發中,結合Element-UI框架可以快速實現這項功能。本文將詳細介紹如何使用Vue和Element-UI來實現訊息通知功能,並提供相關的程式碼範例。一、準備工作在使用Vue和Element-UI實現

See all articles