Vue、Element-ui中tabel表头自定义与强制不换行显示

Element-ui中tabel表头自定义与强制不换行显示

在使用element-ui组件库进行表格渲染时，难免会遇到表头（列标题）的自定义，以及表头过长时多行显示的单行化，超出部分用…代替且光标悬浮显示完整表头的问题。下面我将自己的解决方法、详细过程与大家分享，具体如下：
一、表头自定义
通过查询官方文档得知
具体效果如下：
二、表头强制不换行显示且光标悬浮显示完整表头

1. 为el-tabel添加动态 class
   
2. 为表头与表格内容分别添加css样式
   
3. 在data中分别为它们添加溢出隐藏
   
4. 为表格内需要显示的地方添加点击 显示与隐藏事件
   
   这样即可实现该功能。
   具体效果如下：
   这样就可以实现，表头强制一行且光标悬浮显示完整表头。