展开10条回复 小半urban🍃 ... 你好,请问el-table数据量过多时页面卡死,没有分页,怎么使用虚拟滚动呀[泣不成声] 1年前·山西 0 分享 回复 李钟意讲前端 作者 ... 持续关注,马上会讲,我恰好用了这个 1年前·北京 0 分享 回复 展开1条回复
前段时间实现实现一个表格功能由于一行数据表较多,所以用到el-table表格固定表头,固定头两列和最后一列,底部有左右滑动的滚动条。一页展示二十条数据,需要实现滚动分页功能,table滚动条到底部的时候可自动加载第二页数据,在底部加载第二页数据的时候要有loading加载样式,底部没有用到分页Pagination 标签分页样式。在实现...
使用element-plus在页面里写一个表格,表格有横向和竖向滚动条,想实现表格可以鼠标拖拽滚动。 可以用vue3-dragscroll来实现,首先需要在css里隐藏掉表格的滚动条,将表格的父级设置固定的宽高,并在父级标签上增加v-dragscroll指令。 <template><divclass="data-table"v-dragscroll><el-table:data="rowData"border:sho...
querySelector('.el-table__body-wrapper tbody') Sortable.create(tbody, { onUpdate: (event) => { event.stopPropagation() state.tableData.splice(event.newDraggableIndex, 0, state.tableData.splice(event.oldDraggableIndex, 1)[0]) } }) }) const { tableData } = toRefs(state) </script> ...
="tableData" :stripe="false" class="logBody" :border="false" tooltip-effect="light" style="width: 100%" height="450px" @selection-change="handleSelectionChange" > </el-table> 或者自己封装 如下步骤...1.安装npm install perfect-scrollbar --save 2...
Element-UI 中的 el-table 提供了设置高度的选项,在代码中设置 height 属性就可以现在表格的高度,数据量过多也只会在表格内部生成滚动条,而不是整个页面生成滚动条。 但是这个高度需要固定的数值,不同的分辨率或者缩放后的浏览器使用固定高度后,不能满足只在 el-table 内部生成滚动条的条件。
除非说你去改动 el-dropdown 的源码,把自动修改展开位置的判断从判断视窗改成判断外部滚动容器。所以说 el-dropdown 元素开启 teleported 属性,这样 dropdown 就会挂载到 body 上面了,不会因为 el-table 超出隐藏导致被截断了。不然你的问题没办法解决,解决成本太高了。至于body 设置了 zoom 是适配的关系了。是...
let dom=document.querySelector('.el-drawer__body') ||(document.body as Element) const leftGap =dom.clientWidth> 1200 ? dom.scrollWidth / 1.4: (dom.scrollWidth+ dom.clientWidth) / 2tableRef.value?.scrollTo({ left: leftGap, behavior:'instant'}) ...
问题描述: 在table-column列数据过多会出现横向滚动条,编辑表单后,会对table组件进行重新渲染同时横向滚动条会回到最左侧,希望控制滚动条保持在最右侧 方法: refs[‘tableList’]上有一个bodyWrapper里面有scrollLeft 属性,可以设置表格左滑动的距离为整个
给el-table吸顶 给一些dom元素吸顶 实现过程 思路分析 因为css中的sticky兼容性不是特别好 所以我们使用fixed搭配滚动,去动态控制dom元素是否固定定位 首先,吸顶效果一般是整页滚动条 【就是以html或body作为根元素滚动条】 因为使用的是Vue的框架,所以我们把html和body都设置成定高禁止滚动 把滚动的元素更改为#ap...