基于element-ui的el-select實現(xiàn)的 滾動分頁加載

適用場景

在項目中肩民,我們需要運用到很多來自后端返回的數(shù)據(jù)蔽豺。有時是上百條跷车,有時甚至上千條棘利。如果加上后端的多表查詢或者數(shù)據(jù)量過大,這就導致在前端的顯示就會及其慢朽缴,特別是在網(wǎng)絡不好的時候更是如此善玫。所以分頁展示就是一種較好的交互體驗了。

功能基本介紹

  1. 基于element-uiel-select實現(xiàn)的密强。
  2. 已封裝成組件茅郎,可以實現(xiàn)單選、多選或渤、遠程搜索系冗、滾動分頁加載數(shù)據(jù)、數(shù)據(jù)回顯薪鹦。

效果

微信截圖_20210727173019.png

上代碼

組件代碼:

<template>
  <el-select
    v-model="selectedValue"
    v-loadData="loadData"
    remote
    filterable
    :remote-method="remoteMethod"
    class="more-select"
    :popper-class="`more-select-dropdown ${loading && 'loading'}`"
    :multiple="multiple"
    :clearable="clearable"
    @change="selectChange"
  >
    <!-- 只有isShow定義了false掌敬,才進行隱藏,否則正常顯示 -->
    <el-option
      v-for="(item,index) in list"
      v-show="item.isShow===false?false:true"
      :key="item.value + `'${index}'`"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import Vue from 'vue'
Vue.directive(
  'loadData',
  {
    bind(el, binding) {
      // 獲取element-ui定義好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
      SELECTWRAP_DOM.addEventListener('scroll', function() {
        /**
        * scrollHeight 獲取元素內容高度(只讀)
        * scrollTop 獲取或者設置元素的偏移值,常用于, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值默認為0.
        * clientHeight 讀取元素的可見高度(只讀)
        * 如果元素滾動到底, 下面等式返回true, 沒有則返回false:
        * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
        */
        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
        //監(jiān)聽下拉框是否滾動到底部池磁,滾動到底部就加載下一頁數(shù)據(jù)
        if (condition) binding.value()
      })
    }
  }
)
export default {
   props: {
    // 默認選中值
    selectedValue: {
      type: [Array, String, Number],
      default: ''
    },
    // 默認選中值對應的數(shù)據(jù)奔害,用于回顯
    defaultSelectedStr: {
      type: Array,
      default: () => ([])
    },
    // 是否可以多選
    multiple: {
      type: Boolean,
      default: false
    },
    // 是否可以清空
    clearable: {
      type: Boolean,
      default: false
    },
    // 遠程搜索時,輸入框搜索值的鍵名
    searchKey: {
      type: String,
      default: 'searchKey'
    },
    // 獲取下拉框值得方法名
    getListMethods: {
      type: Function,
      default: null
    },
    // 獲取下拉框值時 默認參數(shù)
    getListParams: {
      type: Object,
      default: () => ({})
    },
    // 下拉框值的格式
    getListFormat: {
      type: Function,
      default: (data) => {
        return data.map(({ label, value }) => ({ label, value }))
      }
    }
  },
  data() {
    return {
      list: [],
      activeValue: '',
      searchText: '',
      pageNum: 1,
      pageSize: 10,
      loading: false,
      finished: false // 是否加載完所有數(shù)據(jù)
    }
  },
  watch: {
    // 默認選中值
    defaultSelected: {
      handler() {
        this.activeValue = this.defaultSelected
      },
      immediate: true
    },

    // 將選中的數(shù)據(jù) 拼成數(shù)組地熄,放在list中华临,用于解決回顯時 非第一頁數(shù)據(jù)無法正常顯示的問題
    defaultSelectedStr: {
      handler() {
        this.list = this.list.concat(this.defaultSelectedStr)
      },
      immediate: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      if (!this.getListMethods || this.finished) return
      this.loading = true
      const params = {
        ...this.getListParams,
        [this.searchKey]: this.searchText,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.getListMethods(params).then(({ data }) => {
        // 對數(shù)據(jù)進行格式化
        data = this.getListFormat(data)
        // 判斷是否是最后一頁了
        if (data.length < this.pageSize) this.finished = true

        this.list = this.list.concat(data)
      }).finally(() => {
        this.loading = false
      })
    },
    searchMethod(searchText) {
      if (searchText === this.searchText) return

      // 防抖處理
      let timeout = null
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        this.list = []
        this.pageNum = 1
        this.finished = false
        this.searchText = searchText
        this.getData()
      }, 500)
    },
    loadData() {
      // 防抖處理
      let timeout = null
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        if (this.finished) return
        this.pageNum += 1
        this.getData()
      }, 500)
    },
    reset() {
      this.activeValue = ''
    },
    selectChange(value) {
      console.log(value)
      this.$emit('selectedChange', value)
    }
  }
}
</script>

使用示例:

<template>
  <div>
    <ScrollSelect
      :selected-value="value"
      :default-selected-str="valueStr"
      :get-list-methods="getListMethods"
      :get-list-format="getListFormat"
      :get-list-params="getListParams"
      :clearable="true"
      :multiple="true"
      search-key="keyword"
      @selectedChange="selectedChange"
    />
  </div>
</template>

<script>
import ScrollSelect from './_modules/scroll-select'
import { queryList } from '@/api/index'

export default {
  components: {
    ScrollSelect
  },
  data() {
    return {
      value: [],
      valueStr: [],
      getListMethods: queryList,
      getListFormat: ({ list = [] }) => { // 下拉框數(shù)據(jù)格式
        return list.map(({ name, id: value }) => ({ label: name, value }))
      },
      getListParams: { // 下拉框接口默認參數(shù)
        isDisabled: 0
      }
    }
  },
  mounted() {
    // 設置默認選中的值
    this.value = [1, 12]
    this.valueStr = [{
      name: 'test',
      id: 1,
      isShow: false
    }, {
      name: '選中的',
      id: 12,
      isShow: false
    }]
  },
  methods: {
    selectedChange(ids) {
      this.value = ids
    }
  }
}
</script>


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市端考,隨后出現(xiàn)的幾起案子银舱,更是在濱河造成了極大的恐慌,老刑警劉巖跛梗,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寻馏,死亡現(xiàn)場離奇詭異,居然都是意外死亡核偿,警方通過查閱死者的電腦和手機诚欠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來漾岳,“玉大人轰绵,你說我怎么就攤上這事∧峋#” “怎么了左腔?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長捅儒。 經(jīng)常有香客問我液样,道長振亮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任鞭莽,我火速辦了婚禮坊秸,結果婚禮上,老公的妹妹穿的比我還像新娘澎怒。我一直安慰自己褒搔,他們只是感情好,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布喷面。 她就那樣靜靜地躺著星瘾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪惧辈。 梳的紋絲不亂的頭發(fā)上琳状,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音咬像,去河邊找鬼算撮。 笑死,一個胖子當著我的面吹牛县昂,可吹牛的內容都是我干的肮柜。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼倒彰,長吁一口氣:“原來是場噩夢啊……” “哼审洞!你這毒婦竟也來了?” 一聲冷哼從身側響起待讳,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤芒澜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后创淡,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痴晦,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年琳彩,在試婚紗的時候發(fā)現(xiàn)自己被綠了誊酌。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡露乏,死狀恐怖碧浊,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情瘟仿,我是刑警寧澤箱锐,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站劳较,受9級特大地震影響驹止,放射性物質發(fā)生泄漏浩聋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一幢哨、第九天 我趴在偏房一處隱蔽的房頂上張望赡勘。 院中可真熱鬧嫂便,春花似錦捞镰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至厂画,卻和暖如春凸丸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背袱院。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工屎慢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人忽洛。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓腻惠,卻偏偏與公主長得像,于是被迫代替她去往敵國和親欲虚。 傳聞我的和親對象是個殘疾皇子集灌,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容