如何用element-ui实现表格边框动态切换及防抖功能的优化？

本文共计1845个文字，预计阅读时间需要8分钟。

目录+需求+实现过程+解决滑动+滑动原因+解决滑动的实现过程+再优化+后续+固定列表+需求+需求是这样的：+先前的需求，要求表格按UI设计图来，表格无边框。+新的需求，要求能支持表格。

目录

• 需求
• 实现过程
• 解决抖动
• 抖动原因
• 解决抖动的实现过程
• 再优化
• 后记
• 固定列

需求

需求是这样的：

• 先前的需求，要求表格按UI设计图来，表格无边框。
• 新来的需求，要求能支持表格列宽的能够支持拖动。

按照官网，table组件的border属性，设置为true时可以显示边框。有了边框才能拖。

但是显示了边框，与之前的需求相悖。同时，既然显示边框有属性border支持，那么动态的更新border的值，应该就可以实现显示表格边框的动态切换。

基于此思路，采用比较折中的办法：

• 默认状态下不显示边框
• 当鼠标移动到表格头部时，显示边框，这个时候允许拖动。

鼠标移动时，通过监控鼠标事件，动态的更新border属性的值，进而动态切换边框的显示。