Comments (1)
以下是抖动视频 https://github.com/xiaocheng555/el-table-virtual-scroll/assets/30517805/ac9f3af0-c993-4140-a1e5-2477393c35d9 以下是Demo 源码,
<template> <div> <el-alert type="success" title="当数据量大于100条时开启虚拟滚动" show-icon></el-alert> <virtual-scroll :data="list2" :item-size="62" key-prop="id" :virtualized="list2.length > 100" @change="(renderData) => virtualList2 = renderData"> <el-table v-el-table-infinite-scroll="loadMore" :class="loading ? 'no-empty' : ''" row-key="id" stripe :data="virtualList2" height="500px"> <el-table-column label="id" prop="id"></el-table-column> <el-table-column label="内容" prop="text" show-overflow-tooltip> <template v-slot:default="{row}"> <div v-for="i in randomNum()" :key="i"> {{row.text}}{{i}} </div> </template> </el-table-column> <el-table-column label="详情"> <template slot-scope="{ row }"> <el-button type="text" @click="row.show = !row.show">{{ row.show ? '隐藏' : '显示' }}</el-button> <div v-if="row.show">{{ row.text2 }}</div> </template> </el-table-column> <el-table-column label="第n行" prop="id"></el-table-column> <el-table-column label="第n行" prop="id"></el-table-column> <el-table-column label="第n行" prop="id"></el-table-column> <el-table-column label="第n行" prop="id"></el-table-column> <el-table-column label="第n行" prop="id"></el-table-column> <el-table-column label="操作" width="260"> <template slot-scope="{ row }"> {{ row.id }} <el-button @click="onDel2(row)">删除</el-button> <el-button @click="onEdit2(row)">编辑</el-button> </template> </el-table-column> <div style="text-align: center; padding: 15px; color: #999;" slot="append" v-if="loading"> 加载中... </div> </el-table> </virtual-scroll> <b>行数: {{ virtualList2.length }}</b> </div> </template> <script> import VirtualScroll from 'el-table-virtual-scroll' import ElTableInfiniteScroll from 'el-table-infinite-scroll' export default { components: { VirtualScroll, }, directives: { ElTableInfiniteScroll }, data () { return { count2: 0, list2: [], virtualList2: [], loading: false } }, methods: { randomNum() { return Math.floor(Math.random() * 5) + 1 }, onEdit (row) { row.text = row.text + '__编辑' }, onDel2 (row) { const index = this.list2.findIndex(item => item === row) if (index > -1) { this.list2.splice(index, 1) } }, loadMore () { if (this.loading) return this.loading = true setTimeout(() => { for (let i = 0; i < 30; i++) { this.count2++ this.list2.push({ id: this.count2, show: false, text: this.getRandomContent(), text2: this.getRandomContent() }) } this.loading = false }, 1000) }, getRandomContent () { const content = [ '这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据这是一条测试数据', '君不见黄河之水天上来,奔流到海不复回。', '十年生死两茫茫把酒问青天把酒问青天', '寻寻觅觅,冷冷清清,凄凄惨惨戚戚。', '桃花坞里桃花庵,桃花庵里桃花仙;桃花仙人种桃树,又摘桃花卖酒钱。', '明月几时有,把酒问青天。把酒问青天把酒问青天', '槛菊愁烟兰泣露,罗幕轻寒,', '寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处,兰舟催发。执手相看泪眼,竟无语凝噎。念去去,千里烟波,暮霭沉沉楚天阔。多情自古伤离别,更那堪冷落清秋节!今宵酒醒何处?杨柳岸,晓风残月。此去经年,应是良辰好景虚设。便纵有千种风情,更与何人说?', '红豆生南国,春来发几枝。红豆生南国,春来发几枝。红豆生南国,春来发几枝。', '黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂黄鹂' ] const i = Math.floor(Math.random() * 10) return content[i] } }, created () {} } </script> <style lang='less' scoped> :deep(.no-empty) { .el-table__empty-block { display: none; } } </style>
<div v-for="i in randomNum()" :key="i">
{{row.text}}{{i}}
</div>
虚拟组件在滚动的时候会重新渲染表格的内容,上面的写法是每次滚动重新渲染数据时内容行数都会变,因为取的随机数,导致表格行每次滚动都可能发生坍塌或撑开,页面表现就是抖动; 你要固定的内容显示行数,可以写在item里,item.lineCount = randomNum(),先计算好,在页面的时候使用item.lineCount
from el-table-virtual-scroll.
Related Issues (20)
- Duplicate keys detected: 'el-table_1_column_1'. This may cause an update error. HOT 11
- 帮忙回答下: 初始化数据的方法一定要在created里面调用吗? 我现在想做导入后虚拟滚动渲染 显示数据都是重复的 HOT 17
- 自定义固定列 所有列宽总宽度小于表格宽度时 固定列样式有问题 HOT 2
- 更新到1.1.3后报错 el-table-column未注册 HOT 14
- 表格隐藏状态下更新绑定数组长度,显示后滚动条位置异常 HOT 9
- 使用二次封装的el-table时,cellFixedStyle() 方法里获取table时没有使用 getElTable() 方法获取 HOT 2
- row-span-key对应的函数只能返回一个key吗 ,多列参与了合并行怎么处理? HOT 2
- 表格列数过多仍然会卡顿,这个会考虑解决吗? HOT 3
- 使用toggleRowSelection选中多行会卡死,有什么办法高效选中多行么 HOT 4
- 新增 Backtop 回到顶部 功能 HOT 1
- 是否考虑将element-table的select事件集成进来 HOT 3
- 是否考虑将element-table的select事件集成进来
- scrollTo事件不精确的问题 HOT 3
- 希望支持横向滚动条sticky HOT 4
- 关于在resize后vfixed类名错误问题 HOT 1
- 虚拟表格如果动态添加数据的时候就会出现空白,主要是产生的偏移值不对 HOT 2
- this.elTable.syncPosition is not a function HOT 3
- 大神考虑支持下vue3不? HOT 1
- 复制案例换了数据 虚拟滚动就不生效了
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from el-table-virtual-scroll.