欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue如何實現el-select下拉選項的懶加載

 更新時間:2022年04月07日 15:22:44   作者:heroboyluck  
這篇文章主要介紹了vue如何實現el-select下拉選項的懶加載,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

下拉選擇是常用的用戶交互選擇的操作;常用固定選擇項或者動態(tài)渲染選擇項。

實際項目中存在數據量大,一次性渲染很多數據會造成下拉卡頓的問題,通過滾動懶加載,逐步增加下拉選項。

滾動加載的核心邏輯

通過監(jiān)聽容器的滾動事件,滾到最底部時,執(zhí)行加載數據函數。

interface IScrollOption {
  distance: number; // 觸發(fā)loadData事件的滾軸距底部的距離
  loadData: () => void; // 數據加載函數
}
/**
 * 處理容器滾動事件 ; 滾動到底部時,執(zhí)行處理函數
 * @param dom
 * @param option
 */
function handleScroll(dom: Element, option: IScrollOption) {
  //
  const scrollBottom = dom.scrollTop + dom.clientHeight;
  if (dom.scrollHeight - scrollBottom <= option.distance) {
    // 數據加載
    option.loadData();
  }
}

在vue中處理數據懶加載

使用Element作為UI組件,常用下拉select 方式為

<el-select v-model="selectData">
? <el-option v-for="item in data" :key="item.id" value="item.id" :label="item.name"></el-option>
</el-select>

data 為渲染數據,存在大批量數據時,防止下拉卡頓,采用懶加載的方式逐步增加數據

由于el-select 組件并沒有提供內部數據滾動的事件或者自定義內部滾動容器DOM元素 . 只能通過F12 查看頁面結構獲知滾動的容器DOM選擇器 .

可以通過自定義指令的方式,提取共用邏輯,不局限于select,也可用于其他列表懶加載渲染的UI組件.

/**
 * 定義懶加載數據列表的指令
 * 可通過滾動懶加載來減少一次性渲染大量數據的性能卡頓
 */
import Vue from "vue";
import { throttle } from "lodash";
export interface ILazyProps {
  loadData: () => void; // 數據加載函數
  distance: number; // 觸發(fā)函數調用的滾動距離
  scrollBody?: string; // 置頂滾動容器 , 不指定則為指令綁定元素
  callback: (fn: () => void) => void; // 自定義回調邏輯,可用于適時銷毀監(jiān)聽事件
}
Vue.directive("lazy-load", {
  /**
   * el - 指令所綁定的元素DOM
   * binding - 傳入指令的其他附帶參數
   *    name - 指令名
   *    value  - 指令綁定的值
   *    oldValue - 綁定的前一個值
   *    expression - 指令綁定的字符串形式的表達式
   *    arg - 傳給指令的參數
   *    modifiers - 指令修飾符的對象
   * vnode
   * oldVnode
   */
  inserted: (el, binding) => {
    // 獲取scroll 滾動的容器元素,由參數傳入
    // 如果沒有傳入,則默認綁定指令的元素自己
    // 獲取懶加載處理函數 , 以及其他參數
    const { loadData, distance, scrollBody, callback } =
      binding.value as ILazyProps;
    let scrollContainer = el;
    if (scrollBody) {
      scrollContainer = el.querySelector(scrollBody) || el;
    }
    // 滾動事件監(jiān)聽
    const scroll = throttle(
      handleScroll.bind(null, scrollContainer, { distance, loadData }),
      500
    );
    scrollContainer.addEventListener("scroll", scroll);
    // 回調時 返回事件銷毀函數
    callback(() => {
      scrollContainer.removeEventListener("scroll", scroll);
    });
  },
});

在vue組件中使用指令 v-lazy-load

視圖,只需要添加指令.綁定指令需要的屬性值.

<el-select v-model="selectData" v-lazy-load="lazyOption">
? <el-option v-for="item in data" :key="item.id" value="item.id" :label="item.name"></el-option>
</el-select>

腳本部分 , 包括初始化layzOption 定義數據加載函數 

import { ILazyProps } from "@/directives/lazyLoad";
export default class extends Vue {
  lazyOption: ILazyProps = {
    loadData: this.loadData,
    distance: 20,
    scrollBody: ".el-scrollbar__wrap", // 為el-select 滾動容器的DOM元素的class選擇器
    callback: (fn: () => void) => {
    	// 這里是在組件銷毀前, 移除監(jiān)聽事件.
      this.$once("hook:beforeDestroy", () => fn());
    },
  };
	loadData(): void {
    this.data = this.data.concat(
      new Array(5).fill({
        id: "1009",
        name: "雙十一",
      })
    );
  }
}

Element-plus 正在新增的一個組件 el-select-v2 虛擬化列表下拉選擇器 . 虛擬列表與懶加載不同的是,虛擬列表渲染的DOM節(jié)點固定,通過滾動的位置計算需要展示的數據.

Element 指令v-infinite-scroll

element 也提供了用于懶加載數據的指令v-infinite-scroll , 缺陷在于它只監(jiān)聽指令綁定的DOM元素的滾動事件.

  • infinite-scroll-disabled 是否禁用加載,如果是分頁數據 , 則可以通過計算屬性pageSize*pageNum>=total
  • infinite-scroll-delay 節(jié)流加載,默認 200ms
  • infinite-scroll-distance 觸發(fā)加載的滾動距離閥值 .
  • infinite-scroll-immediate 是否立即執(zhí)行加載函數,需要撐滿容器元素;否則手動請求一次數據.

整個數據列表頁不需要分頁操作時, 需要通過頁面滾動來加載數據

<div v-infinite-scroll="loadData" infinite-scroll-disabled="disabled" infinite-scroll-delay="delay">
    <table
      :showPagination="false"
      :tableOption="tableOption"
      :tableColumns="tableColumns"
    ></table>
</div>

頁面滾動時調用loadData函數,定義請求加載數據的邏輯.

直接貼源碼

export default {
  name: 'InfiniteScroll',
  inserted(el, binding, vnode) {
    // 綁定的回調函數
    const cb = binding.value;
		// 當前組件實例引用
    const vm = vnode.context;
    // only include vertical scroll
    // 滾動容器DOM元素
    const container = getScrollContainer(el, true);
    // 獲取指令需要的參數 delay distance immediate disabled 
    const { delay, immediate } = getScrollOptions(el, vm);
    // 滾動事件處理函數,節(jié)流
    const onScroll = throttle(delay, handleScroll.bind(el, cb));
		// 將額外的計算屬性綁定到el上,在unbind 可用于移除監(jiān)聽函數
    el[scope] = { el, vm, container, onScroll };
    if (container) {
      container.addEventListener('scroll', onScroll);
      if (immediate) {
        // 容器內元素發(fā)生節(jié)點變更時觸發(fā)執(zhí)行
        // MutationObserver API 功能調用
        const observer = el[scope].observer = new MutationObserver(onScroll);
        observer.observe(container, { childList: true, subtree: true });
        // 初始調用一次滾動加載函數
        onScroll();
      }
    }
  },
  unbind(el) {
    // 移除滾動事件
    const { container, onScroll } = el[scope];
    if (container) {
      container.removeEventListener('scroll', onScroll);
    }
  }
};
  • MutationObserver 監(jiān)視對DOM樹更改的能力

實例構造函數接收一個回調函數,為DOM發(fā)生變化時需要執(zhí)行的回調

  • observe(target,[option]) 配置需要監(jiān)聽的DOM元素,以及DOM變更的配置項
  • disconnect() 停止接收DOM變化的通知
  • takeRecords() 獲取未被回調處理的通知

以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關文章

  • vue-router實現webApp切換頁面動畫效果代碼

    vue-router實現webApp切換頁面動畫效果代碼

    本篇文章主要介紹了vue實現app頁面切換效果實例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • vue中el-table實現穿梭框(數據可以上移下移)

    vue中el-table實現穿梭框(數據可以上移下移)

    本文主要介紹了vue中el-table實現穿梭框(數據可以上移下移),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-06-06
  • Vue中使用create-keyframe-animation與動畫鉤子完成復雜動畫

    Vue中使用create-keyframe-animation與動畫鉤子完成復雜動畫

    這篇文章主要介紹了Vue中使用create-keyframe-animation與動畫鉤子完成復雜動畫,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • vue中v-if和v-for一起使用的弊端及解決辦法(同時使用 v-if 和 v-for不推薦)

    vue中v-if和v-for一起使用的弊端及解決辦法(同時使用 v-if 和 v-for不

    當 v-if 和 v-for 同時存在于一個元素上的時候,v-if 會首先被執(zhí)行,這篇文章主要介紹了vue中v-if和v-for一起使用的弊端及解決辦法,需要的朋友可以參考下
    2023-07-07
  • vue實現四級導航及驗證碼的方法實例

    vue實現四級導航及驗證碼的方法實例

    我們在做項目經常會遇到多級導航這個需求,所以下面這篇文章主要給大家介紹了關于vue實現四級導航及驗證碼的相關資料,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-07-07
  • vue實現登錄時滑塊驗證

    vue實現登錄時滑塊驗證

    這篇文章主要為大家詳細介紹了vue實現登錄時滑塊驗證,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue事件處理原理及過程詳解

    Vue事件處理原理及過程詳解

    這篇文章主要介紹了vue事件處理原理及過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-03-03
  • vue引入axios同源跨域問題

    vue引入axios同源跨域問題

    這篇文章主要介紹了vue引入axios同源跨域問題,文章給大家提供了解決方案,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • 簡單理解Vue條件渲染

    簡單理解Vue條件渲染

    這篇文章主要幫助大家簡單理解Vue條件渲染,什么是Vue條件渲染,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • vue-router 實現導航守衛(wèi)(路由衛(wèi)士)的實例代碼

    vue-router 實現導航守衛(wèi)(路由衛(wèi)士)的實例代碼

    這篇文章主要介紹了vue-router 實現導航守衛(wèi)(路由衛(wèi)士)的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09

最新評論