Element 自定义指令 下拉分页,获取无限数据

news2024/12/23 2:47:08

原文链接icon-default.png?t=N7T8https://www.cnblogs.com/DL-CODER/p/17528026.html自定义指令loadmore:

Vue.directive('loadmore', {
  bind(el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector(
      '.el-select-dropdown .el-select-dropdown__wrap'
    )
    if (SELECTWRAP_DOM) {
      SELECTWRAP_DOM.addEventListener('scroll', function() {
        /*
         * scrollHeight 获取元素内容高度(只读)
         * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
         * clientHeight 读取元素的可见高度(只读)
         * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
         * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
         */
        const CONDITION =
          this.scrollHeight - this.scrollTop - 1 <= this.clientHeight
        if (CONDITION) {
          console.log('----------------------------')
          console.log('loadmore', CONDITION)
          console.log('scrollHeight', this.scrollHeight)
          console.log('scrollTop', this.scrollTop)
          console.log('clientHeight', this.clientHeight)
          console.log('----------------------------')
          binding.value()
        }
      })
    }
  }
})

methods 方法:



    loadmoreBatchList() {
      if (this.batchList.total > this.batchList.list.length) {
        this.getBatchList(data, ++this.batchList.pageNo)
      }
    },

    getBatchList(data, pageNo = 1) {
      // data 为接口传递的自定义数据  (即获取下一页数据)
      this.$store.dispatch('getOutboundBatchsList', {
        ...data,
        pageNo: pageNo,
        pageSize: this.batchList.pageSize
      })
        .then(({ code = 0, data = {} }) => {
          if (code == 1 && data.total) {
            this.batchList = {
              ...this.batchList,
              list: uniqBy([...this.batchList.list, ...data.list], 'id'),
              total: data.total
            }
          }
        })
    },

 data 下拉数据:

  batchList: {
    list: [],
    total: 0,
    pageNo: 1,
    pageSize: 100
   },

template 代码:

  <el-form-item>
    <el-select
      v-model="form.batchId"
      v-loadmore="loadmoreBatchList"
      placeholder="请输入批次名称"
      filterable
      clearable>
        <el-option v-for="(item, key) in batchList.list" :key="key" :label="item.batchName" :value="item.id"></el-option>
    </el-select>
  </el-form-item>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1182063.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

87.有效的完全平方数(力扣)

目录 问题描述 代码解决以及思想 知识点 问题描述 代码解决以及思想 class Solution { public:bool isPerfectSquare(int num) {long int left 0; // 定义左边界&#xff0c;使用 long int 以避免整数溢出long int right num; // 定义右边界&#xff0c;初始…

跨境电商平台Etsy被封?那是因为你没做对这件事!

ETSY是一个在线市场和电商平台&#xff0c;专注于手工艺品、独特商品和创意艺术。它为卖家提供了一个平台来展示和销售自己的手工制品、艺术品、珠宝、家居用品、时尚配饰等各种创意产品。作为一个颇受中国商家青睐的平台&#xff0c;Etsy在账号检测方面也是不亚于亚马逊之严格…

SOLIDWORKS 2024新功能--Electrical篇

电气工程师在完成电气原理图设计的同时&#xff0c;还需要频繁的修改&#xff0c;导出各报表&#xff0c;使得大量时间浪费在重复性的手动工作上&#xff0c;即便如此&#xff0c;也无法保证百分百准确无误&#xff1b;电气设计部门和机械设计部门虽然在设计同一产品&#xff0…

【前端面试题】 HTML+CSS篇

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 如何理解 HTML 语义化&#xff1f; 根据内容来选择合适的标签 优点&#xff1a; 让人更容易读懂&#xff08;增加…

无人机航迹规划:狐猴优化算法LO求解无人机路径规划MATLAB(可以修改起始点,地图可自动生成)

一、狐猴优化算法 狐猴优化算法&#xff08;Lemurs Optimizer&#xff0c;LO&#xff09;由Ammar Kamal Abasi等人于2022年提出&#xff0c;该算法模拟狐猴的跳跃和跳舞行为&#xff0c;具有结构简单&#xff0c;思路新颖&#xff0c;搜索速度快等优势。狐猴优化算法&#xff…

CrossOver2023(Mac电脑运行Windows软件)

CrossOver是一款可以让你在MAC上运行Windows应用的软件&#xff0c;CrossOver不像Parallels或VMware的模拟器&#xff0c;而是实实在在Mac OS X系统上运行的一个软件。CrossOvers能够直接在Mac上运行Windows软件与游戏&#xff0c;而不需虚拟机。兼容 Mojave 的 CrossOver Mac …

Spring Cloud学习(二)【Eureka注册中心】

文章目录 Eureka 注册中心Eureka 的作用 动手实践搭建 EurekaServer服务注册服务发现 Ribbon 负载均衡负载均衡原理IRule 接口&#xff08;负载均衡策略&#xff09;饥饿加载 Eureka 注册中心 服务调用出现的问题 不能采用硬编码服务消费者该如何获取服务提供者的地址信息&am…

微信小程序连接后端案例

setting.js 小Demo测试一下&#xff08;楼主这里使用的为PHP后台&#xff09;&#xff1a; 微信开发者工具中写入如下代码&#xff0c; // pages/setting/setting.js Page({/*** 页面的初始数据*/data: {demo:},ceshifuwuqi:function(){var that thiswx.request({url: http:/…

掌动智能性能压力测试优势有哪些

企业通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试。本文将介绍性能压力测试的价值及主要优势! 一、性能压力测试的价值 1、评估系统能力&#xff1a;有助于参数的基准测试&#xff0c;可以度量系统的响应时间;还有助于检查系统是否可…

MySQL库的操作指南(上)

1.创建数据库 一般格式&#xff1a;create database (if not exists) database1_name,database2_name...... 特殊形式&#xff1a; create database charset harset_name collate collate_name 解释&#xff1a; 红色字是用户自己设置的名称charset&#xff1a;指定数据…

前端之Bootstrap框架

目录 【一】Bootstrap介绍 【二】Bootstrap引入 【1】CDN加速链接 【2】注意 【三】布局容器 【四】栅格系统 【五】栅格参数 【六】列偏移 【七】排版 标题 内联文本元素 对齐 改变大小写 引用 列表 【八】表格 基本实例 条纹状表格 带边框的表格 鼠标悬停…

集合贴1——人工智能技术

集合一下人工智能技术的文章&#xff1a; 基础课2——自然语言处理-CSDN博客文章浏览阅读412次。自然语言处理&#xff08;Natural Language Processing, NLP&#xff09;是计算机科学领域与人工智能领域中的一个重要方向&#xff0c;它研究能实现人与计算机之间用自然语言进…

STM32F103C8T6第三天:pwm、sg90、超声波、距离感应按键开盖震动开盖蜂鸣器

1. 定时器介绍1&#xff08;317.21&#xff09; 软件定时&#xff08;之前的定时方法&#xff09;&#xff08;软件延时&#xff09;缺点&#xff1a;不精确、占用CPU资源 void Delay500ms() //11.0592MHz {unsigned char i, j, k;_nop_();i 4;j 129;k 119;do{do{while (-…

三数之和(双指针)

15. 三数之和 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三…

Python知识点——文件和数据格式化

目录 文件的打开 文件的打开模式 文件的路径 文件的关闭 文件内容读取 文件的读取 文件的写入 例题 文件的打开 文件的打开模式 文件打开模式描述‘r’只读模式&#xff0c;默认值&#xff0c;如果文件不存在&#xff0c;返回FileNotFoundErrorw覆盖写模式&#xff…

xray:漏洞扫描利器

简介 长亭科技旗下的一款网络安全漏洞扫描工具&#xff0c;用于检测和评估web应用程序的安全性。具有一下特点&#xff1a;检测速读快、检查范围广、代码质量高、高级可定制以及安全无危害。属于不开源的项目&#xff0c;用户直接下载xray的可执行文件&#xff0c;即可运行该工…

基于STM32的烟雾传感器

1.说到烟雾传感器&#xff0c;就有必要了解一下ADC的工作原理&#xff0c;Analog-to-Digital Converter&#xff0c;指模拟/数字转换器 。 2. 选择ADC 3.main函数 uint32_t smoke_value 0; while (1){HAL_ADC_Start(&hadc1);//启动ADC1转换HAL_ADC_PollForConversion(&am…

Linux防火墙入门:学会使用firewalld和iptables

1 防火墙 1.1 防火墙介绍 防火墙就是过滤的表格&#xff0c;被记录在表格中的信息&#xff0c;才允许通过访问。 1.2 两种火墙策略 iptables dnf install iptables-services -y systemctl disable --now firewalld systemctl mask firewalld systemctl enable --now ip…

BP神经网络的数据分类——语音特征信号分类

大家好&#xff0c;我是带我去滑雪&#xff01; BP神经网络&#xff0c;也称为反向传播神经网络&#xff0c;是一种常用于分类和回归任务的人工神经网络&#xff08;ANN&#xff09;类型。它是一种前馈神经网络&#xff0c;通常包括输入层、一个或多个隐藏层和输出层。BP神经网…

Go 面向对象,多态

面向对象 工程结构 新建一个oop.go package _oop // Package _oop 引用名称import ("fmt""strconv" )// GIRL 常量 const (// GIRL 自增GIRL Gender iotaFIRSTSECONDTHIRD )type Gender uint8 // 无符号的8位整数类型// User 结构体 type User struct…