自适应网站欣赏,在线咨询妇科医生免费,网站建设工作计划表,wordpress生成tags页面虚拟滚动主要是在有限范围内渲染想要显示的数据#xff0c;主要体现在懒加载数据和动态渲染上。如何提高虚拟滚动的操作性呢#xff1f;请看本章解析
1.什么是虚拟滚动#xff1f;代码如何实现#xff1f;
VXE-Table提供了一种名为“虚拟滚动”的功能#xff0c;该功能可…虚拟滚动主要是在有限范围内渲染想要显示的数据主要体现在懒加载数据和动态渲染上。如何提高虚拟滚动的操作性呢请看本章解析
1.什么是虚拟滚动代码如何实现
VXE-Table提供了一种名为“虚拟滚动”的功能该功能可以处理大量数据的渲染避免了 DOM 元素过多导致的性能问题最大可以支撑 5w 列、30w 行。
在模板中使用 标签并设置scroll-y(纵向)/scroll-x(横向)中的enabled属性为 trueture为开启false为关闭默认为关闭。 设置 height 属性以限制表格的高度。 设置 row-height 属性以指定每行的高度。 vxe-tableborderheight200 //表格的高度row-height50 //行的高度:scroll-y{enabled: true} //开启纵向虚拟滚动:datatableDatavxe-column typeseq width100/vxe-columnvxe-column fieldname titleName sortable/vxe-columnvxe-column fieldsex titleSex/vxe-columnvxe-column fieldage titleAge/vxe-columnvxe-column fieldaddress titleAddress show-overflow/vxe-column/vxe-table提示 启用虚拟滚动后show-overflowshow-header-overflowshow-footer-overflow 参数将根据不同场景各自触发生效无法取消如果需要支持需将虚拟滚动关闭 性能优化横向虚拟滚动由列宽决定性能每一列的列宽越大就越流畅纵向虚拟滚动由行高决定性能每一行的高度越高就越流畅 2.滚动条定位
“虚拟滚动”的本质是动态渲染所以如果想操作未渲染的自定义组件时就需要将其跳转到响应的单元格位置否则无法获取到未渲染数据行的id或者ref等各种信息也就自然无法进行响应。所以滚动条定位就是单元格中自定义组件动态响应的前提。
首先需要为了访问vxe-table的DOM需要定义一个ref vxe-tableborderrefxTable //设置指向vxe-table的引用height200 //表格的高度row-height50 //行的高度:scroll-y{enabled: true} //开启纵向虚拟滚动:datatableDatavxe-column typeseq width100/vxe-columnvxe-column fieldname titleName sortable/vxe-columnvxe-column fieldsex titleSex/vxe-columnvxe-column fieldage titleAge/vxe-columnvxe-column fieldaddress titleAddress show-overflow/vxe-column/vxe-table然后在需要进行滚动条定位的地方加上如下代码 setTimeout(() {// x是期望滚动到位置水平轴上距元素左上角的像素。// y是期望滚动到位置竖直轴上距元素左上角的像素。// 回到滚动条顶端的代码就是 this.$refs.xTable.scrollTo(0, 0)// 跳转到第20行的代码就是 this.$refs.xTable.scrollTo(0, 行高 * 20)this.$refs.xTable.scrollTo(x, y)}, 50)提示如果想要操作的数据行不在虚拟滚动队列画面上显示的数据只是虚拟滚动队列里的一部分里是不会被渲染的。所以无法获取对应的DOM。 例如画面上显示了1到5行虚拟滚动队列里是1到8行。当你想要更改第20行时需要先跳转到第20行不然无法更改第二十行的样式等元素。 注this.$refs.xTable.getTableData()可以查看目前的虚拟滚动队列 3.对单元格中的组件进行样式变更
如果想在单元格中对自定义的组件进行动态响应例如焦点聚焦更改样式等。就必须要在滚动条定位是动态响应的前提下进行。
首先在单元格中自定义一个input控件并为其创建动态ref。 vxe-tableborderrefxTable //设置指向vxe-table的引用height200 //表格的高度row-height50 //行的高度:scroll-y{enabled: true} //开启纵向虚拟滚动:edit-config{trigger: click, mode: cell, showIcon: false}//单击可编辑单元格:datatableDatavxe-column fieldname titleName width260 template #default{ row, rowIndex }divinput:refnamerowIndex//动态reftabindex0v-modelrow.nametypetextmaxlength17//最大入力17位/div/template/vxe-column/vxe-table在想要实现动态响应的地方添加如下代码 setTimeout(() {this.$refs.xTable.scrollTo(0, 行高 * 响应行)//滚动条跳转到响应行}, 50)setTimeout(() {this.$refs[name 响应行].focus()//焦点落在相应行的input控件上this.$refs[name 响应行].style.backgroundColor #fcd4d4//input控件背景变红}, 100)//例如 行高20的表格想要让第110行的name单元格动态响应代码如下setTimeout(() {this.$refs.xTable.scrollTo(0, 20* 110)}, 50)setTimeout(() {this.$refs[name 110].focus()this.$refs[name 110].style.backgroundColor #fcd4d4}, 100)4.虚拟样式缓存
与上述2和3不同的是vxe-table中自带的方法可以不用担心虚拟滚动导致无法更改样式vxe-table会在方法施行时对样式进行虚拟缓存当渲染时默认渲染最新样式。拿单元格改色做例子。
引入更改单元格样式的方法 vxe-tableborderrefxTable //设置指向vxe-table的引用height200 //表格的高度row-height50 //行的高度:cell-styletableCellStyle // 调用单元格样式动态响应的方法:scroll-y{enabled: true} //开启纵向虚拟滚动:datatableDatavxe-column typeseq width100/vxe-columnvxe-column fieldname titleName sortable/vxe-columnvxe-column fieldsex titleSex/vxe-columnvxe-column fieldage titleAge/vxe-columnvxe-column fieldaddress titleAddress show-overflow/vxe-column/vxe-table在tableCellStyle方法中实现动态样式 // rowIndex 当前行数// column 列集合tableCellStyle ({ rowIndex, column}) {let rowStyle {}rowStyle.backgroundColor #fff !important// 单元格背景默认为白色if (column.field name rowIndex 20) { // 如果是第20行的name列单元格rowStyle.backgroundColor #fcd4d4 !important// 单元格背景为红色} return rowStyle},
