饿了么表格固定列实现方案
image.png
多层table DOM叠加

表格头部固定使用一个table结构
表格表体部分使用一个table结构
左右的悬浮列各使用一个table结构，并且悬浮列中的表头部分是独立的table结构

该实现方案导致问题就是渲染大量的DOM,在同时使用以上功能，并且数据表较大时，DOM数量会是数据的3倍以上，导致渲染性能较差，由于饿了么表格中会监听表格的滚动事件，来计算设置dom的交互效果，并控制各固定列的同步滚动，所以在数据比较大的时候，可以明显的感觉到饿了么表格的滚动卡顿，同时基于饿了么表格开发的行内编辑功能会有较大的卡顿和延迟。

vue-element-extends的解决方案：虚拟滚动

vue-element-extends在饿了么表格基础上，使用操作在外层封装，预处理了一次传入表格中的数据，对全量的表格数据做了虚拟滚动的处理，截取了部分数据作为表格的渲染数据，并通过操作dom的方式在饿了么表格的scrollTop来模拟出滚动的效果
image.png
通过该方式可以优化大量数据时表格的编辑和滚动交互效果，但是由于饿了么表格本身实现设计的问题，该优化方式也并不能完美解决以上性能问题，大量数据时，滚动由于需要实时计算，并动态渲染，任然是有一定性能问题的，在加上scroll事件的节流处理，滚动的固定列同步任然是会存在微小的延迟。

优化方向

所以在使用饿了么表格时，应该避免一页渲染大量数据的情形，避免在大量数据的同时，做复杂的表格交互，可以通过设置分页，控制一页最大不超过50条最佳，减少固定列的使用，通过减少dom的渲染来提高浏览器的渲染速度。

更好的解决方法

使用基于position:sticky属性开发的固定列功能实现的表格组件，该属性开发的固定列可以让叠加表格的结构减少到最多只有2层（缺点：不支持ie），原生设计实现的虚拟滚顶功能
例如：vue-easytable

表格的编辑功能

vue-element-extends可以很好的支持饿了么表格中使用饿了么form组件进行编辑，一般场景编辑都可以通过配置的方式显示表格编辑功能。
image.png
由于该组件的封装方式是使用饿了么form组件的v-model语法糖来实现数据的双向绑定的，导致当表格中需要编辑的数据是嵌套属性时，v-model无法正确的绑定到所需的属性，编辑功能将不能正确的更新修改的数据。
例如：cluster.name
image.png
image.png

修复方式

拆解v-model的语法糖，使用常规的prop传值和监听事件方式，实现数据的更新，vue默认v-model的props是value属性，对应的更新事件为input，element的form组件都是按照这个默认语法设计的
image.png