vue实现滚动加载的表格
实现效果
滚动加载知识储备
参考ant-design-vue中list滚动加载的思路,使用vue-infinite-scroll加上vue-virtual-scroller作为解决方案。
组件封装
因为整个系统使用的框架是ant-dsign-vue,所以组件封装的变量命名风格尽可能的与a-table保持一致。
1. 组件命名
xscrolltable.vue
2. 提供的props
必填字段:
datasource -- 数据源
columns -- 表格展示的列信息,插槽用法和a-table不完全一样,下面会提到。
itemsize -- 每行数据的高度
选填字段:
rowkey -- 数据主键标识,默认为'key'
height -- 表格展示区域的高度,默认为500
pagesize -- 表格滚动每次滚动加载的数据量,默认为30
infinitescrolldistance -- 表格触发加载的距离条件,默认为10
rowselection -- 表格多选配置,已处理的属性有selectedrowkeys、onchange、width。默认为null,不展示多选。
3.使用举例
首先初始化10000条数据,放在表格中进行显示。
注意:这里之所以加了fill(1),是因为通过array构造函数产生的数据全是empty,没有数组索引,无法进行map循环。
加载表格
组件封装总结
1.尽可能地使用computed计算属性
虽然只是简单地封装了表格,但还是需要定义了很多的属性,使用计算属性代替在data里定义变量,可以减少变量的维护工作量。
整个组件只定义了一个page变量,其它都是使用计算属性的方式。
举个栗子:
通过page属性定义一个计算属性来表示当前已经加载的数据量
通过这个计算属性同时衍生出其他的计算属性
通过一个page属性衍生出一系列的计算属性,我只需要维护page属性,其他都是自动计算的。
2.给表格提供插槽
首先通过表格传入的columns参数,计算出需要渲染的列,这里同样使用计算属性。
在template中遍历
如果在定义columns时传入了scopedslots和customrender,将使用插槽渲染。
但是这里存在和ant-design-vue中表格插槽渲染不一样的地方。
我通过slot标签定义的插槽,在父组件获取插槽参数的时候,只能使用slot-scope="{record,text}"对象解构的方式。而ant-design-vue表格是可以直接使用slot-scope="record,text"获取参数的。
另一种滚动加载数据的实现
table数据多的时候打开页面会加载一会才显示数据,这样体验不好,所以要做滚动加载数据
下面是js部分
在这里我要说明一下监听的dom对象是哪一个
我还要解释下scrollheight、scrolltop、clientheight这三个属性
这是我截的别人的图加了几笔
scrollheight:网页正文全文高度,
scrolltop:网页滚动的高度,
clientheight:网页可视区域的高度
以上就是vue实现滚动加载的表格的详细内容,更多关于vue 滚动加载的表格的资料请关注其它相关文章!
上一篇: 搜狐需要出路,但不是靠张朝阳上课