el-table和vxe-table兼容

Posted 2023-03-22

vue（element-ui)  + springboot

要求table一页显示一百条数据。

数据要求经过处理再展现在前端，需要经历多次遍历。

 

问题描述：
数据量过大，且需要处理。

数据加载的时间长，且下拉滚动条的时候十分卡。IE尤其卡。

 

原因分析：
数据量过大和格式改变element-ui原有的el-table组件不够合适

IE不兼容

解决方案：
一开始换成了vxe-table，是一个专门做table的组件，里面很多功能都很好用，就是文档写的特别多简略，需要自行研究。

vxe-table解决了很多问题，但加载速度还是很慢。找大佬看过之后发现是里面的嵌套组件用了element的级联选择器，和vxe-table不够兼容，就换成了vxe-table的选择器。

数据量大显示慢的问题，用settimeout间歇性请求数据，100条数据可以分五次，每次请求二十条，时间间隔短，前端肉眼感觉不明显

改动后发现数据是很快出现了，但是IE滚动条依旧很难拖动。

发现是z-index层级问题。将父组件的position从static改为relative，z-index改为正数的较大值，将元素往前挪。（IE的浏览器会自动在页面加一个滚动条，组件里面的滚动条就很难用） 参考技术A vxe-table 对于 footer 的支持更好，el-table 只有对 header 和 body 的插槽，而 vxe-table 提供了 footer 的插槽。
由于项目需要应用到移动端，vxe-table 在锁列、锁头、锁尾功能上兼容性更好，而 el-table 在某些机型上无法做到固定表格列。
可扩展性更强大，el-table 只是组件库中的一个组件，而 vxe-table 主要的做 table，提供了更多的功能和配置，有利于项目后续新需求的开发。 参考技术B 性..
.
V.u.e中的.el-table和vxe-table是完全兼容的，它们都是基于Vue的表格组件，可以非常容易地实现表格的功能，并且都可以支持大数据量，可以更快捷地渲染数据，提高用户体验。