解决table数据量大在IE中不兼容的问题

项目场景：

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的浏览器会自动在页面加一个滚动条，组件里面的滚动条就很难用）

 

.classname >>> table{
    position: relative;
    z-index: 5;
}