vue向上滚动加载,vue滑动加载
在系统的开发中，有这样一个问题：后端一次返回几百条数据，我需要在表格中显示所有返回的数据。况且甲方爸爸明确规定表内不允许分页。然而，当使用a-table加载数百条数据时，页面出现明显的卡顿现象。只能用滚动加载的方案代替。
目录
滚动载荷知识储备达到效果
包裹
1.组件命名
2.提供的道具
3.使用示例
包摘要
1.尽可能使用computed来计算属性。
2.为桌子提供插槽
滚动加载数据的另一种实现
实现效果
云地址
滚动加载知识储备
参考ant-design-vue中列表滚动加载的思路，使用vue-infinite-scroll加vue-virtual-scroll作为解决方案。
组件封装
因为整个系统使用的框架是ant-dsign-vue，所以组件封装的变量命名风格尽量和a-table保持一致。
1. 组件命名
XScrollTable.vue
2. 提供的props
必填字段：
数据源-数据源
Columns -表格中显示的列信息，槽位使用与a-table不完全相同，下面会提到。
ItemSize -每行数据的高度
选择字段：
RowKey -数据主键标识符，默认为“Key”
Height -表格显示区域的高度，默认为500。
PageSize——每次滚动表格时加载的数据量，默认为30。
InfiniteScrollDistance -表触发加载的距离条件，默认为10。
RowSelection -表格配置了多种选择，处理的属性包括selectedRowKeys、onChange和width。默认值为null，因此不显示多项选择。
3.使用举例
首先，10，000条数据被初始化并显示在一个表中。
假设数据=新数组(10000)。填充(1)；
data=data.map((item1，index)={
let item={ }；
item.id=index
Item.age= name
Item.address= address
退货项目；
});
导出默认数据；
注意：这里之所以加fill(1)是因为数组构造函数生成的数据都是空的，没有数组索引，所以不能进行map循环。
装载表
x-滚动表格
style=margin-top: 10px
row-key=id
:itemSize=22
:row selection= { selectedRowKeys:selectedRowKeys，onChange: onSelectChange，width:50}
:列=“列”
:dataSource=data
模板slot= action slot-scope= { record，text}
A @click=handleDetail(record)详细信息/a
/模板
/x-滚动表
组件封装总结
1.尽可能地使用computed计算属性
尽管这个表被简单地封装了，但是仍然需要定义许多属性。用计算属性代替在数据中定义变量，可以减少变量的维护工作量。
整个组件中只定义了一个页面变量，其余都是计算属性。
data() {
返回{
//当前显示的页数
第1页，
};
},
举个栗子：
通过页面属性定义一个计算属性，表示当前加载的数据量。
//显示的最大下标数大于数据总数。用slice解决这个问题。
lastIndex() {
返回this . pagesize * this . page；
},
同时从该计算属性派生出其他计算属性。
//指示表数据是否已加载。
busy() {
return this . last index=this . data source . length；
},
//当前加载到RecycleScroller滚动组件中的数据
tableData() {
返回this.dataSource.slice(0，this . last index)；
},
一系列计算属性是从页面属性中派生出来的。我只需要维护页面属性，其他的都是自动计算的。
2.给表格提供插槽
首先，通过从表中传入的columns参数计算要呈现的列。这里，还使用了计算属性。
//将列数组变成列对象，以columnFieldKey值为键，以数组项为值。
columnMap() {
return this . columns . reduce((return value，cur)={
return value[cur[column field key]]=cur；
返回returnValue
}, {});
},
//取数组里的列键值- columnFieldKey
columnKeys() {
返回此列。map(item=item[列字段键])；
},
在模板中遍历
div v-for=(key) of columnKeys
class=省略号单元格
:key=key
:style= item style(column map[key])
slot v-if= izSlotRender(columnMap[key])
:name=列映射[键]。scopedslots。自定义渲染
:record=row
:text=row[key]
/插槽
span v-else:title= row[key] { { render item(row，index，key) }}/span
/div
//是否使用插槽渲染
izSlotRender(item) {
退货项目。作用域插槽项目。作用域插槽。自定义渲染；
},
如果在定义列时传入了scopedSlots和自定义渲染，将使用插槽渲染。
但是这里存在和蚂蚁设计中表格插槽渲染不一样的地方。
我通过狭槽标签定义的插槽，在父组件获取插槽参数的时候，只能使用slot-scope={record，text} 对象解构的方式。而蚂蚁设计表格是可以直接使用插槽范围=记录，文本获取参数的。
另一种滚动加载数据的实现
桌子数据多的时候打开页面会加载一会才显示数据，这样体验不好，所以要做滚动加载数据
El-table:data= material list style= width:100% class= family data detail height= 250
El-table-column prop=事件id 标签=事件ID
模板范围="范围"
标签{ {事件映射[范围。划。事件id]==null？- : eventMap[scope.row.eventId].序列号} }/标签
/模板
/El-表格-列
El-table-column prop= title label=对应事件
模板范围="范围"
标签{ {事件映射[范围。划。事件id]==null？- : eventMap[scope.row.eventId].title}}/label
/模板
/El-表格-列
埃尔-表格-列属性=年龄标签=负责人
模板范围="范围"
label { {事件映射==null 事件映射[范围。划。事件id]==null 事件映射[范围。划。事件id].personalInformation==null？ - :
事件映射[范围。划。事件id]。个人信息。name } }/label
/模板
/El-表格-列
el-table-column prop=生日标签=物料名称
模板范围="范围"
label{{materirlName}}/label
/模板
/El-表格-列
El-table-column prop= idcardNo label=状态
模板范围="范围"
标签{ {格式类型(范围。划。type)} }/label
/模板
/El-表格-列
埃尔-表-列属性=关系标签=数量
模板范围="范围"
标签{ { formatUseNum(范围。划。usenum)} }/label
/模板
/El-表格-列
El-table-column prop= ethtic label=使用时间
模板范围="范围"
标签{ {更改时间(范围。划。创建于)} }/label
/模板
/El-表格-列
/el-table
下面是射流研究…部分
方法：{
init (param) {
设id=param.param param.param.id
如果(id){
this.start=0
材料记录服务。查询({ param:{ baseId:this。baseId，materialId: id}，start: this.start，limit: 30}).然后(rsp={//初次请求数据，30条
this.start=30
this.materielList=rsp.data
missioneventservice。微列表({ ids:RSP。数据。map(n=n . eventid)}).然后(rsp3={
this.eventMap={}
RSP 3。数据。foreach(n=(this。事件映射[n . id]=n))
})
})
}
},
onScroll() {
让inner=document。查询选择器(.El-table _ _ body-wrapper )；
如果(内心。滚动高度-内部。滚动顶部=内部。客户身高){//为真实的时证明已经到底，可以请求接口
if(this.flag){//设一个滚动事件的开关，(在数据里面声明标志：真)默认为真实的
this.flag=false
材料记录服务。查询({ param:{ baseId:this。baseId，materialId: this.entity.id}，start: this.start，limit:30}).然后(rsp={//每次加载30条
这个。物资清单=这个。材料清单。concat(RSP。数据)
this.start=30
this.flag=true
missioneventservice。微列表({ ids:RSP。数据。map(n=n . eventid)}).然后(rsp3={
RSP 3。数据。foreach(n=(this。事件映射[n . id]=n))
})
})
}
}
}
},
已安装(){
this.init({.this.param})br//监听表格数字正射影像图对象的滚动事件
document.querySelector( .el-table__body-wrapper).addEventListener(scroll ，this。在卷轴上)；
}
在这里我要说明一下监听的数字正射影像图对象是哪一个
我还想解释一下scrollHeight，scrollTop，clientHeight这三个属性。
这是我剪下来加了几笔的别人的图。
ScrollHeight:网页正文的全文高度，
ScrollTop:网页滚动的高度，
ClientHeight:网页可视区域的高度。
这就是vue的滚动加载表的细节。更多关于vue的滚动装载台的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。