el-table单元格内容较多时隐藏，鼠标hover时显示并且显示的内容可以换行 && el-table提示框样式优化

目录

一、el-table内容较多时隐藏，hover时换行显示

二、总结

---

一、el-table内容较多时隐藏，hover时换行显示

1.在需要隐藏的列el-table-column中加上属性   :show-overflow-tooltip="true"

  实现内容较多时隐藏,hover时显示。

 也换行了，但是换的太丑了@——@

2.在标签中添加样式

  实现hover时多余的内容换行显示，自定义换行的宽度

 注：必须写在全局样式中——和下面一样就可以（不能在style后面加上scoped,否则样式不生效）

3.这个下拉框还是很丑，修改提示框样式。

  在el-table中添加属性  :tooltip-effect=" 'xxx'" 

  xxx给提示框添加了一个类名 is-xxx ，下面设置了tooltip-effect=" 'tooltipStyle' "，并添加了

is-tooltipStyle这个类设置提示框样式

.is-tooltipStyle {
  background: #fff;
  color: #3759af;
  border: 1px solid rgb(158, 157, 157);
  font-size: 15px;
}

最终效果：

注：那个小箭头的样式不知道怎么改，如有朋友知道，欢迎评论，非常感谢 ！

二、总结

1.对于样式，可以先尝试在浏览器中找到看看是否可以修改。

2.接口传参不会的时候，可以看看别人是怎么传的。

3.不要一来就百度，百度出的结果很可能不是你想要的。