el-table组件内容过长时显示tooltip

el-table内容过多的时候可以设置 show-overflow-tooltip为 true，这样可以设置实现超出隐藏功能。

但是这个方法有些问题：

先看下效果

如果拖动表头宽度，改变列的宽度，也可以适应。

能实现上述效果主要是能获取到列的width和realWidth 这2个字段的值（目前这个版本是可以获取到的），不拖动表头宽度的时候获取的是width字段，拖动表头后获取realWidth

table的列设置fixed后，element框架在渲染时会再生成一个table，宽度为所有固定列之和，这个固定列的table将原有table的滚动条遮盖了。

在这里插入描述

解决方法：

方法一：改变固定列table的高度

// 做法一： 直接设置固定列table的高度：表格高度 - 滚动条高度

/deep/ el-table__fixed {

height:calc(100% - 6px) !important;

}

// 做法二：设置固定列table的高度自适应，并设置bottom

/deep/ el-table__fixed {

height:auto !important; // 为保证样式不错乱，让固定列的高自适应

bottom:6px !important; // 不遮盖滚动条，留出滚动条的高度（6px为预估高度，不设置高度只设置bottom无效，原样式中的top属性权重更高，可设置top为auto,再设置bottom，但这样表格上部分会被hidden，影响整体样式）

}

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

方法二：改变层级（推荐）

/deep/ el-table--scrollable-x el-table__body-wrapper {

z-index: 1;// 框架已设置该元素定位为relative

}

1

2

3

1

2

3

以上就是关于el-table组件内容过长时显示tooltip全部的内容，包括:el-table组件内容过长时显示tooltip、element表格添加x轴加不上滚动条、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！