el-select 无限下拉滚动加载数据

这篇具有很好参考价值的文章主要介绍了el-select 无限下拉滚动加载数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

el-select 无限下拉滚动加载数据,vue.js,elementui,javascript,前端,ecmascript文章来源地址https://www.toymoban.com/news/detail-620209.html

<template>
  <div>
    <el-form
      ref="saveParameter"
      :model="saveParameter"
      inline
      inline-message
      style="margin:10px"
    >
      <el-form-item label="供应商" prop="lngcustomerid">
        <el-select
          v-model="saveParameter.lngcustomerid"
          v-loadmore="loadMore()"
          style="width: 180px;"
          clearable
          :filter-method="filterMethod"
          filterable
          @visible-change="visibleChange"
        >
          <el-option
            v-for="item in stashList.slice(0,rangeNum)"
            :key="item.treedataid"
            :value="item.treedataid"
            :label="item.treedatacodeandname"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { res } from './data.js'
import selectLoadMore from '@/layout/mixin/selectLoadMore'
import PinyinMatch from 'pinyin-match'
export default {
  name: 'SelectScroll',
  components: { listScroll },
  mixins: [selectLoadMore],
  data() {
    return {
      rangeNum: 10,
      customerList: res.data,
      stashList: res.data,
      saveParameter: {
        lngcustomerid: 7402
      }
    }
  },
  created() {
    this.findById(this.saveParameter.lngcustomerid)
  },
  methods: {
    loadMore() {
      // eslint-disable-next-line
        return () => this.rangeNum += 2
    },
    filterMethod(newVal) {
      if (newVal) {
        this.stashList = this.customerList.filter((item) => {
          return PinyinMatch.match(item.treedatacodeandname, newVal)
        })
      } else {
        this.stashList = this.customerList
      }
    },
    visibleChange(val) {
      // if判断,防止搜索的数据选中后,多一次下拉隐藏
      if (val === true) {
        this.stashList = this.customerList
      }
    },
    // 查看编辑的时候赋值
    findById(id) {
      var o = []
      if (this.customerList.some(item => {
        if (item.treedataid === id) {
          o.push(item)
          return true
        }
      })) {
        this.stashList = this._.unionBy(o, this.stashList, 'treedataid')
      }
    }
  }
}
</script>
selectLoadMore.js
export default { directives: { 'loadmore': { bind(el, binding) { const SELECT_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECT_DOM.addEventListener('scroll', function() { const condition = this.scrollHeight - this.scrollTop <= this.clientHeight if (condition) binding.value() }) } } } }

到了这里,关于el-select 无限下拉滚动加载数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue element 编辑下拉框el-select不能回显的问题

    本人的需求是点击表格里面的编辑按钮,把数据回显到弹窗内,其他的都能回显,但是就下拉框不能正常的回显 本人后端人员,有不对的地方,勿喷 这是因为点击编辑,收集到下拉框的value是一个数字导致的,传值应该是 ‘1’ 而不是 1 解决办法一:,给弹窗子组件传参的时

    2024年02月11日
    浏览(39)
  • vue拿到下拉框el-select的选择项的value和label

    1.单独一个下拉框时 2.el-table每行数据都有下拉框时   思路: 1.首先选择下拉框事件拿到选择的这行数据scope.row  2.其次去遍历绑定的下拉框数据,使用find()方法查找item.value === row.value  3.找到则返回对应的row.label   4.最后将label值以键值对形式加到row对象中 代码实例:

    2024年02月11日
    浏览(114)
  • vue2 - 详细介绍element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例(组件封装)

    在项目上常用使用到 el-select 和 el-tree 组合实现,记录下两者结合的实现过程。(代码以及注释清晰明了,代码直接使用即可) 要求根据项目接口提供的数据,el-tree 里的数据是一次性返回来的,点击最后一层级时,请求接口,在点击层级下方追加数据追加的数据要显示勾

    2024年04月15日
    浏览(64)
  • el-select与el-tree结合使用,实现select框下拉使用树形结构选择数据

    使用el-select与el-tree,实现如下效果, 代码如下:  注意点:搜索input框的代码一点放在option上面,不要放在option里面,否则一点击搜索框,下拉框就会收起来,不能使用。

    2024年02月13日
    浏览(54)
  • Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题

    在前两天进行页面全屏时,一切都还好好的,可当使用element-ui中的el-select时,下拉菜单却怎么也显示不出来,但只要退出全屏状态,立马就好。 非全屏时:  全屏时: 开始我以为是层级问题,所以给el-select的下拉菜单加z-index,却发现加到多大都没用。 后来去官方文档里找

    2024年01月17日
    浏览(71)
  • VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示(下拉框不显示无法选择)问题解决

    问题原因:elemrnt-ui会默认将弹出框插入至 body 元素;当设置了某个元素全屏时,会遮挡住原来的select下拉数据。

    2024年02月14日
    浏览(60)
  • elementUI中el-select数据分页懒加载实现

    工作中使用elementUI框架时, 会经常用到下拉框展示数据,如果数据量很大会影响页面的渲染加载速度。遇到这种情况,通常后端代码会将数据做成分页查询,前端下拉框组件也要支持滑动到底部会自动加载下一页数据。话不多说,直接上代码。 这样子组件下拉框就实现了检索、

    2024年02月12日
    浏览(50)
  • 【Vue2 + ElementUI】更改el-select的自带的下拉图标为倒三角,并设置相关文字颜色和大小

    效果图 实现 总结 将el-select自带的下拉选择图标(如下图 1- 箭头),替换成自定义图标(如下图 2- 倒三角) (1)利用控制台找到 图 1 所在的位置,如下该图标是通过 伪类元素 添加的。 (2) 替换为 图 2   ① 只更改图标,不更改大小 在图标库(例 elementUI)找对应的图标

    2024年01月25日
    浏览(47)
  • Vue2 + element ui el-select 远程搜索分页懒加载功能实现

    新建指令 :         1、 在 src 目录下 新建文件夹 directive / loadmore         2、在 loadmore 文价夹下新建 elSelectLoadmore.js 和 index.js 文件:            elSelectLoadmore.js index.js 3、在main 文件中注册该指令 4、 基于 el-select 封装 懒加载 远程搜索框 remoteSelect.vue 组件提示

    2024年01月21日
    浏览(50)
  • element el-select下拉框选择失效

    2023.1.11今天我学习了使用element el-select组件下拉框选择数据失效的原因以及解决办法。 如图:   当我已经选择启用状态的时候,然后点击停用状态没反应。 是因为在配置表单的过程中,重复使用了这个字段。 如: 就是在表单中重复使用了status这个字段,然后导致选择失效。

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包