Comments (1)
错误描述: 点击【商品名称】该列下的内容,手动触发展开,再点击收起后,滚动条无法继续拖动。T_T
具体demo: https://codesandbox.io/s/nifty-wright-8chhnf?file=/src/App.vue
具体代码:
<template> <div> <virtual-scroll ref="virtualScroll" :data="list" :item-size="62" key-prop="id" @change="onVirtualChange" > <el-table ref="table" v-loading="loading" :data="tableData" height="600" row-key="id" style="width: 100%" > <virtual-column type="expand"> <template slot-scope="props"> <el-table :data="props.row.children"> <el-table-column align="center" prop="name" label="专业代码" ></el-table-column> </el-table> </template> </virtual-column> <el-table-column label="商品 ID" width="70" prop="id"></el-table-column> <el-table-column label="商品名称" prop="name"> <template slot-scope="props"> <span @click="toggleExpand(props.row)" style="cursor: pointer"> {{ props.row.name }} </span> </template> </el-table-column> </el-table> </virtual-scroll> </div> </template> <script> import VirtualScroll from "el-table-virtual-scroll"; import { VirtualColumn } from "el-table-virtual-scroll"; export default { components: { VirtualScroll, VirtualColumn, }, data() { return { list: [], tableData: [], loading: false, }; }, methods: { fetchData() { this.loading = true; this.list = []; setTimeout(() => { this.list = []; for (let i = 1; i < 2000; i++) { const text = this.getRandomContent(); const text2 = this.getRandomContent(); this.list.push({ id: i + 1, name: "商品名称,点我展开" + i, show: false, text, text2, }); } this.loading = false; }, 1000); }, getRandomContent() { const content = [ "这是一条测试数据", "君不见黄河之水天上来,奔流到海不复回。", "十年生死两茫茫", "寻寻觅觅,冷冷清清,凄凄惨惨戚戚。", "桃花坞里桃花庵,桃花庵里桃花仙;桃花仙人种桃树,又摘桃花卖酒钱。", "明月几时有,把酒问青天。", "槛菊愁烟兰泣露,罗幕轻寒,", "寒蝉凄切,对长亭晚,骤雨初歇。都门帐饮无绪,留恋处,兰舟催发。执手相看泪眼,竟无语凝噎。念去去,千里烟波,暮霭沉沉楚天阔。多情自古伤离别,更那堪冷落清秋节!今宵酒醒何处?杨柳岸,晓风残月。此去经年,应是良辰好景虚设。便纵有千种风情,更与何人说?", "红豆生南国,春来发几枝。", "黄鹂", ]; const i = Math.floor(Math.random() * 10); return content[i]; }, async onVirtualChange(virtualList) { this.tableData = virtualList; }, toggleExpand(row) { if (!row.$v_expanded) { setTimeout(() => { let tableDataIndex = this.tableData.findIndex( (item) => item.id === row.id ); console.log("tableDataIndex", tableDataIndex); this.$set(this.tableData[tableDataIndex], "children", [ { id: Math.random() + row.id + 2111, name: "商品名称" }, { id: Math.random() + row.id + 2112, name: "商品名称" }, { id: Math.random() + row.id + 2113, name: "商品名称" }, { id: Math.random() + row.id + 2114, name: "商品名称" }, { id: Math.random() + row.id + 2115, name: "商品名称" }, { id: Math.random() + row.id + 2116, name: "商品名称" }, { id: Math.random() + row.id + 2117, name: "商品名称" }, { id: Math.random() + row.id + 2118, name: "商品名称" }, { id: Math.random() + row.id + 2119, name: "商品名称" }, { id: Math.random() + row.id + 2120, name: "商品名称" }, { id: Math.random() + row.id + 2121, name: "商品名称" }, { id: Math.random() + row.id + 2122, name: "商品名称" }, { id: Math.random() + row.id + 2123, name: "商品名称" }, ]); this.$refs.virtualScroll.toggleRowExpansion(row); this.$refs.virtualScroll.update(); }, 1500); } else { this.$refs.virtualScroll.toggleRowExpansion(row); this.$refs.virtualScroll.update(); } }, }, created() { this.fetchData(); }, }; </script> <style lang='less' scoped> .demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } </style>
不要使用children属性,el-table会当成树结构,children改为其他名称试试
from el-table-virtual-scroll.
Related Issues (20)
- 表格列数过多仍然会卡顿,这个会考虑解决吗? HOT 4
- 使用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
- el-table-column 添加 show-overflow-tooltip 之后,在当前show-overflow-tooltip列滚动时,页面会抖动 HOT 1
- this.elTable.syncPosition is not a function HOT 3
- 大神考虑支持下vue3不? HOT 1
- 复制案例换了数据 虚拟滚动就不生效了
- 增加selection列,使用filter实现搜索功能,搜索前选中的行,搜索后仍被选中,这个是bug还是做了处理 HOT 29
- 虚拟列表是否有类似el-table实例中的selection属性 HOT 7
- vue3 为啥没有更新了? HOT 1
- 使用模拟树结构懒加载时,如何让prop不显示 HOT 5
- 使用 <virtual-column> vfixed, 表尾合计行对应的列没有固定 HOT 3
- `VirtualColumn` 使用 vfixed 若 left 不在最前,right 不在最后,将无效 HOT 2
- 滚动后触发blur事件 取到的index不对 HOT 6
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.