<template> <section> <el-col :span="24"> <el-tabs v-model="activeName"> <el-tab-pane label="库存不足商品补货明细" name="1"> <el-table :
转载 2024-04-30 17:28:50
79阅读
由于工作的原因,现在需要实现一个滚动加载(PC端)的效果,之前使用的是vue+element,但是element没有类似的组件,所以去github上找了一个名叫vue-mugen-scroll,使用起来很简单也很方便,所以给大家分享一下如果使用。一、准备工作首先需要安装一下组件: npm install --save vue-mugen-scroll不需要全局引用,在需要的地方引用即可:
转载 1月前
496阅读
传统的无限滚动数据表格并不会一次性把所有数据都加载并渲染出来,它首先加载一批数据,这批数据要远大于一屏数据的承载量,但也不能太多,避免首屏数据加载效率不佳,具体数量可以由开发者根据实际情况确定。接着通过监控滚动条位置来实时加载更多的数据,比如当滚动条触底时(或即将触底时),开始加载当前已显示的数据集之后的数据,当滚动条触顶时(或即将触顶时),开始加载当前已显示的数据集之前的数据先创建一个视图模板&
转载 2024-07-13 09:13:22
910阅读
首先,在你的Vue2.x项目里安装@vue/composition-api插件,就可以使用 Vue3 中的 Composition ApI 了。这里不在对Vue Composition API做详细介绍,可直接参考官方文档, 本文用到的API有 setup, ref, onMounted, onBeforeUnmountIntersectionObserver API Inte
分享一下elementUI在vue里如何实现记忆回显数据已选中选项  前言: 回显table数据,有很多种方式,这里将用两种方法讲解table表中选中项的回显,第一种方式适合分页数据的回显,第二种更适合单条数据的回显。   需要回显的原因:table表分页,是在点击下一页会获取新一页的数据,在点击上一页,数据是重新请求的,因此若第一页有选中状态,点击任何页在
Vue Element table表格实现表格数据动态滚动(无限滚动),绑定鼠标事件 (实现鼠标进入和出去的时候数据是否滚动)(也可以不写看自己需求)
原创 2023-02-14 14:56:28
1425阅读
最近遇到个问题。后台一次性返回2万条列表数据。并且需求要求所有数据必须全部展示,不能做假分页(不能优化了)。这些数据的直接来源就是CS客户端。他们做CS客户端就是一次性加载几万条数据不分页(说这是客户的要求)。我体验了一把CS客户端,数万条数据放在那里,着实卡顿。他们CS开发人员非他妈嘴硬说,这一点也不卡,极致顺滑。真尼玛在这里掩耳盗铃呢,是吗?懒得跟他们废话。结论就是:永远不要和傻子讲道理。不废
原创 精选 2024-03-26 16:29:00
3109阅读
//1.在main.js里注册 Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.query
原创 2023-05-26 05:53:46
302阅读
代码】[vue]el-table实现自动滚动效果。
原创 2022-12-21 10:17:54
725阅读
1. 先说elment-ui table组件滚动条位置element ui table 添加数据行后滚动滚动到对应的行头或行尾问题 滚动到第一行: this.$refs.table.bodyWrapper.scrollTop =0; 滚动到最后一行: this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scr
转载 2024-10-21 09:31:14
1644阅读
一、原生要获取盒子(元素)的滚动条位置,可以使用JavaScript的scrollTop和scrollLeft属性。这些属性用于获取或设置元素的垂直和水平滚动条位置。下面是获取盒子滚动条位置的示例:// 获取盒子元素 var box = document.getElementById('myBox'); // 获取垂直滚动条位置 var scrollTop = box.scrollTop; /
# jQuery Table 滚动 在Web开发中,表格是一种常见的数据展示方式。然而,当表格数据量较大时,用户需要滚动来查看全部数据,为了提升用户体验,我们可以通过jQuery实现表格滚动功能。 ## 实现方法 我们可以使用jQuery来监听表格内容的滚动事件,当表格内容滚动时,动态改变表格头部和左侧固定列的位置,以实现表格的滚动效果。 具体步骤如下: 1. 根据表格的结构,确定需要固定
原创 2024-07-10 06:51:39
35阅读
使用element plus的table,然后获取里面的dom对象,使用定时器设置滚动
原创 2022-10-30 06:01:23
1864阅读
虚拟滚动 纵向虚拟滚动:scroll-y 横向虚拟滚动:scroll-x 1.首先留意项目中使用的版本,我这边在项目用的是 "vxe-pc-ui": "4.0.95"版本 "vxe-table": "4.7.65"版本 所以scroll-y是可使用的,这里的弃用是因为在"vxe-table": "4 ...
思路:后端分页导致每一页之间的勾选状态都是独立的,我们需要新建一个数组来保存这些被勾选数据的id,当切换到某个页码时,从数组中进行比对,如果当前页码有待勾选的id,则用代码让当前页码的数据勾选起来。 注意: 不要使用row-key 和 reserve-selection 。否则导致自己管理的勾选状态与el-table自身保存的勾选状态互相冲突,导致状态难以管理。我们的目的是,表格的勾选状态均由代码
转载 2024-04-08 19:38:07
373阅读
主要代码: const startAutoScroll = () => { intervalId.value && clearInterval(intervalId.value) intervalId.value = setInterval(() => { if (!containerRef.val
原创 5月前
147阅读
一、 什么是懒加载      懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。二、为什么需要懒加载      在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页
转载 5月前
18阅读
vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同) mounted() { // 在mounted中监听表格scroll事件 thi
转载 2020-12-08 13:44:00
328阅读
2评论
场景描述后台返回的数据是不分页的,而且都是1000条以上,需要前端滑动滚动条展示更多数据。网上搜索了一番,加上我自己的修改,整理出如下代码先看效果图可能视频才能表现出效果,无奈,放一张无效效果图,哈哈哈。。。组件代码<!-- paginationTable.vue --><template> <el-table :data="tableData" ref
vue
原创 精选 2023-03-22 11:57:00
2555阅读
只需要在最后一列指定列宽即可。比如下面最后一列是“操作”列,加上 width="200",即会在表格宽度大于浏览器页面宽度时显示横向滚动条了 <el-table ref="multipleTable" v-loading="loading" :data="taskList"> <el-table-c
ico
原创 2022-05-19 11:33:50
3762阅读
  • 1
  • 2
  • 3
  • 4
  • 5