首页 > 其他分享 >修改elment的下拉组件,满足大数量下拉

修改elment的下拉组件,满足大数量下拉

时间:2024-03-08 13:57:16浏览次数:24  
标签:selectProps originalData selectValue elment label 修改 组件 query options

针对我们项目中经常会遇到下拉框在遇到大量数据时,加载会卡顿,用户体验感不好。针对该情况我对el-select组件做了一下修改,来满足这样大量数据下拉不卡顿。提高用户的体验感。

具体代码如下:

<template>
  <div>
    <el-select
      style="width: 100%"
      v-model="selectValue"
      :placeholder="selectProps.placeholder || '请选择'"
      size="mini"
      filterable
      :filter-method="delayFilter"
      @change="selectChange"
      v-selectloadmore="loadMore"
    >
      <el-option v-for="(item, index) in options"
       :key="item[selectProps.value || 'value'] + index"
       :label="item[selectProps.label || 'label']"
       :value="item[selectProps.value || 'value']"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'large-data-select',
  directives: {
    'selectloadmore': {
      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 - 2 <= this.clientHeight
          if (condition) {
            binding.value()
          }
        })
      }
    }
  },
  props: {
    selectProps: {
      type: Object,
      default: () => {
        return {
          options: [],
          rangeNumber: 50
        }
      },
      require: true
    },
    dataIndex: {
      type: Number,
      default: 0
    },
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      selectValue: '',
      rangeNumber: this.selectProps.rangeNumber || 50,
      options: [],
      originalData: [],
      query: ''
    }
  },
  watch: {
    value: {
      handler (newVal) {
        this.selectValue = newVal
      },
      deep: true,
      immediate: true
    },
    selectProps () {
      this.init()
    }
  },
  created () {
    this.delayFilter = _.debounce((query) => {
      this.filter(query)
    }, 500)
  },
  mounted () {
    this.$nextTick(() => {
      if (this.selectProps.options && this.selectProps.options.length > 0) {
        this.init()
      }
    })
  },
  methods: {
    init () {
      this.originalData = this.selectProps.options.concat()
      this.initRenderOpions(this.originalData)
    },
    loadMore (n) {
      if (n < 8) this.rangeNumber = 10
      this.rangeNumber += 5 // 每次滚动到底部可以新增条数  可自定义
      this.filter(this.query)
    },
    filter (query) {
      this.query = query
      if (this.query) {
        const newOption = this.originalData.filter((item) =>
          item[this.selectProps.label || 'label'].includes(query)
        )
        this.initRenderOpions(newOption)
      } else {
        this.initRenderOpions(this.originalData)
      }
    },
    selectChange () {
      this.$emit('updateChange', this.selectValue, this.dataIndex)
      this.initRenderOpions(this.originalData)
    },
    initRenderOpions (list) {
      const options = list.slice(0, this.rangeNumber)
      let index = -1
      if (_.size(this.selectValue)) {
        index = _.findIndex(options, (item) => {
          return item[this.selectProps.label || 'label'] === this.selectValue
        })
        if (index === -1) {
          const currentItem = _.find(list, (game) => {
            return game[this.selectProps.label || 'label'] === this.selectValue
          })
          if (currentItem) {
            options.unshift(currentItem)
          }
        }
      }
      this.options = options
    }
  }
}
</script>

 

标签:selectProps,originalData,selectValue,elment,label,修改,组件,query,options
From: https://www.cnblogs.com/llwang43/p/18060802

相关文章

  • MYSQL学习笔记3: DDL表修改
    DDL表修改在表中添加新字段#格式ALTERTABLE表名ADD字段名(长度)[COMMENT注释][约束];#在itcast表中新建一个nickname字段altertableitcastaddnicknamevarchar(20)comment'昵称';修改字段数据类型altertable表名modify字段名新数据类型(长度);修改字段名......
  • Jenkins 批量修改Job的配置
    登录Jenkins机器,执行以下shell脚本--单文件替换sed-i"s#xxxxx#xxxxxx#g"/var/lib/docker/volumes/jenkins-data/_data/jobs/front-account-aosit/config.xmlsed-i"s#xxxxxxx#\#xxxxx#g"/var/lib/docker/volumes/jenkins-data/_data/jobs/front-account-uat......
  • C++ Qt开发:QFileSystemModel文件管理组件
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用QFileSystemModel组件实现文件管理器功能。QFileSystemModel是Qt框架中的一个关键类,用于......
  • ubuntu 修改环境变量
    (转自百度AI生成,仅作参考) 在Ubuntu中,可以通过编辑~/.bashrc文件来修改路径。打开终端(Terminal)应用程序。输入以下命令来编辑.bashrc文件:nano~/.bashrc使用键盘上的方向键将光标移动到要添加或更新的行之前。如果没有特定需求,则直接按Ctrl+V进入插入模式。根据需要添加......
  • P8686 [蓝桥杯 2019 省 A] 修改数组
    备赛蓝桥杯和icpc的习题:一道并查集的题目>#include<iostream>>#include<vector>>#include<algorithm>>#include<math.h>>#include<string>>#include<string.h>>#include<iomanip>>#include<map>&g......
  • electron暴露配置文件(用户可随时修改)
    配置文件一般web前端项目配置文件,写死的放在src/config下,需要打包配置的放在.env文件中。但在electron项目中,如果配置数据更改,需要每次给用户打包升级肯定是行不通的。于是外部配置文件就是有必要的,具体实现方法也比较简单,通过fs去读写外部文件就可实现具体实现设置文件不被压......
  • WPS正文自动识别成目录修改
    原因是正文部分的大纲级别不是正文文本1、在正文格式段落中将大纲级别修改成正文文本;2、点击智能识别的导航窗格目录,点击已经修正的正文格式即可。......
  • 若依集成CIM(即时推送系统)实现将服务端修改为SpringBoot+Vue前后端分离版(文末见代码
    ​ 场景若依前后端分离版本地搭建开发环境并运行项目的教程:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 CIMGitee地址:https://gitee.com/farsunset/cimCIM项目是基于mina或者netty框架下的推送系统,我们平常使用第三方的推送SDK,如极光推送,百度......
  • Vue学习笔记38--单文件组件
    单文件组件命名规则如下所示:------单个单词命名规则:------方式一:temp.vue方式二:Temp.vue建议使用(可和vue开发者工具呼应)------多个单词命名规则------方式一:my-temp.vue方式二:MyTemp.vue建议使用(可和vue开发者工具呼应)组件交互相关的代码暴露方式:1.分别暴露:exportconst......
  • 使用ilasm 和 ildasm编译和反编译工具对DLL文件修改
    目录前言一、使用ildasm反编译dll文件二、使用ilasm将il文件编译成dll或exe文件前言文本讲述怎么通过ildasm工具将dll文件进行反编译为il文件,修改il文件后再如何通过ilasm工具将il文件反编译成dll或exe文件。ildasm工具:用于将dll文件反编译成可读......