xiaocheng555 / el-table-virtual-scroll Goto Github PK
View Code? Open in Web Editor NEW基于Element-UI的Table 组件开发的虚拟滚动组件,支持动态高度,解决数据量大时滚动卡顿的问题。
基于Element-UI的Table 组件开发的虚拟滚动组件,支持动态高度,解决数据量大时滚动卡顿的问题。
<virtualScroll
:data="tableData"
:itemSize="45"
keyProp="colGuid"
@change="data => (renderData = data)"
@selection-change="selectRows"
>
<el-table
row-key="colGuid"
:data="renderData"
:height="tableHeight"
ref="multipleTable"
border
size="small"
:stripe="isStripe"
:header-cell-style="headerStyle"
:cell-style="{ textAlign: 'center' }"
v-loading="loading"
element-loading-text="加载中..."
element-loading-spinner="aic-icon-loading"
>
<virtual-column width="55" type="selection"></virtual-column>
<virtual-column label="序号" align="center" width="80" type="index"></virtual-column>
<el-table-column prop="itemName" label="名称" min-width="100"> </el-table-column>
<el-table-column prop="createTime" label="创建时间" min-width="100"> </el-table-column>
<el-table-column prop="sortNo" label="排序" min-width="100"> </el-table-column>
<el-table-column label="操作" min-width="100" fixed="right">
<template slot-scope="scope">
<el-button
:disabled="scope.row.status === 1"
type="primary"
size="mini"
icon="el-icon-edit"
title="详情"
@click="onDetail(scope)"
></el-button>
</template>
</el-table-column>
</el-table>
</virtualScroll>
<el-table-column
prop="cost"
label="金额"
:min-width="140"
>
<template slot-scope="scope">
<el-form-item
:prop="
`${detailListName}[${scope.$index + vIndex}].${scope.column.property}`
"
>
<el-input-number
v-model="scope.row.cost"
placeholder="请输入"
:style="{ width: '100%' }"
controls-position="right"
:min="0"
:max="100"
:precision="2"
>
</el-input-number>
</el-form-item>
</template>
</el-table-column>
// 排序方法
sortChange(item) {
const { prop, order } = item
const percentReg = /^(\d+(\.\d+)?)%$/
console.log(this.adAccount, 1111)
if (order === 'ascending') {
this.adAccount.sort((a, b) => {
if (percentReg.test(a[prop]) && percentReg.test(b[prop])) {
return parseFloat(a[prop].replace('%', '')) - parseFloat(b[prop].replace('%', ''))
} else {
return a[prop] - b[prop]
}
})
} else {
this.adAccount.sort((a, b) => {
if (percentReg.test(a[prop]) && percentReg.test(b[prop])) {
return parseFloat(b[prop].replace('%', '')) - parseFloat(a[prop].replace('%', ''))
} else {
return b[prop] - a[prop]
}
})
}
}
<virtual-scroll
:data="adAccount"
:dynamic="false"
:item-size="60"
key-prop="id"
@change="(renderData) => virtualList = renderData"
>
<el-table
ref="table"
v-loading="loading"
:data="virtualList"
row-key="id"
:row-class-name="tableRowClassName"
stripe
border
height="700"
@sort-change="sortChange"
>
<el-table-column
v-if="queryParams.dimension.includes('date')"
prop="date"
width="150px"
label="日期"
/>
<el-table-column
v-if="queryParams.dimension.includes('ad.adgroup_id')"
prop="adgroup_name"
width="150px"
label="广告组"
/>
<el-table-column
v-if="queryParams.dimension.includes('ad.campaign_id')"
prop="campaign_name"
width="250px"
label="广告系列"
/>
<el-table-column
v-for="item in listColumns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
:sortable="item.sortable"
/>
</el-table>
</virtual-scroll>
没传默认插槽的时候,代码里写死显示行字段原值了。
VitualColumn的fixed属性被改变后,原先获取的scroller从dom中消失,计算显示条数时候,需要重新获取。建议减轻fixed属性,变化后重新获取scroller。
不知可否将此行代码
el.wrapEl.style.height = wrapHeight + 'px'
改为如下:
if(className.includes('fixed')){
let scrollBarHeight = 10
el.wrapEl.style.height = wrapHeight - scrollBarHeight + 'px'
}
在模板中不判断非空直接使用默认作用域插槽参数row的字段,会报尝试获取undefined上的属性的错误。
小哥你好,最近有个新客户,使用的浏览器版本很低,之前用的el-table,数据量太大,又不想要分页,所以使用了[el-table-virtual-scroll],
但是现在固定列失效了,想问一下有没有什么解决思路呢?
如题 请问树形懒加载是否支持初始指定行不含有子节点?
当table设置lazy和load 绑定的data中含有hasChildren=false的行时
表格可视区域整体变低了
需要为多选框根据条件判断多选是否禁用, virtual-column 不支持使用selectable去控制checkbox的禁用状态, 请问可以支持该属性或新增其他属性去控制吗?
目前不支持树形列表的虚拟滚动,这个支持有计划么?
支持动态添加行重新计算吗?
由于vuex修改数据需要通过mutation,所以在绑定数据源的时候我深克隆了数据。
如果这时用户点击了全选按钮,实际被修改了$v_checked属性的是这份克隆数据。
接下来如果用户对数据进行了操作,比如修改了数据的一个属性,就会触发mutation对原始数据进行修改,这时绑定数据源也跟着发生变化,重新克隆了一份。
但是由于原始数据上没有$v_checked字段,所以页面上的checkbox选中状态消失,但是由于没有发生选中变更,所以 @selection-change事件不会被触发。
我现在的处理方式是,在 @selection-change事件中记录下所有数据的id,然后在 @change 事件中依次对数据设置一次$v_checked属性。
DEMO通过控制台开启关闭display:none样式可复现。
如我在某一行输入10,在输入框获取焦点的状态下,往下滚动页面,10会渲染到其他行
错误描述:
点击【商品名称】该列下的内容,手动触发展开,再点击收起后,滚动条无法继续拖动。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>
win10,vue2.6,webpack2.6,nodeV14
在安装启动以及热部署的时候都没有问题,但是在npm run build打包之后,会产生一个报错
"el-table-virtual-scroll": "^1.0.20",
ERROR in static/js/0.752c5439a0eef37cc905.js from UglifyJs
Unexpected token: name (hook) [./~/el-table-virtual-scroll/dist/el-table-virtual-scroll.esm.js:1422,0][static/js/0.752c5439a0eef37cc905.js:6900,8]
有没有考虑支持vue3,如果想在vue3 + elementPlus 中使用是不是只能手动复制代码然后修改呢
当table表格是可编辑时候,当该项不在首屏,录入表格,可是数据不会双向绑定
想所有列都用virtual-column替代el-table-column,
但目前嵌套virtual-column行为有问题。
el-table-column默认插槽 和 default 的作用域插槽 行为不一样。
el-table-column用作用域插槽嵌套不能实现多表头。
virtual-column只提供了default作用域插槽。
虚拟表格的keyProp 唯一值能否支持多列,有需求是多列来确定唯一值
如果下面的表格是树结构的化会有bug
比如我先选第二行,再选第一行,那么返回的数组的第一个元素就是第二行,第二个元素就是第一行。现在是会按照固定的一个顺序来返回吧?并不是按照勾选的先后顺序。
您考虑出一个ant design vue的版本嘛?
https://xiaocheng555.github.io/el-table-virtual-scroll/#/SortDemo?code=SortDemo&codeTitle=%E6%8E%92%E5%BA%8F
看的是这个demo,发现拖动滚动条时会出现错位现象,逐渐变大的那种,这种正常么
有没有开启和关闭虚拟滚动的props?
有个需求是这样的,就是一页500条,然后做一个前端搜索的功能,方便用户去勾选,比如搜索第365条符合用户的搜索条件,直接表格滚动到第365行,然后方便他去做选择。。。这种以什么样的一个思路去做呢?
需求:如题
场景:有一个超多列的表格,每一列是采用render形式渲染的
没有单选、多选,就单击选中 高亮那一行
<el-table highlight-selection-row @row-click="fn">
表头如果列很多,而且有多表头,是否可以支持虚拟滚动
整体很强大 有个问题是 有些列fixed后单选 多选使用 ]提供colum列兼容后 把chekc列也fixed 选中的行会错行显示 如果不fixed 这一列又无法固定在开头
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.