element ui table show-overflow-tooltip自定义样式

element ui table show-overflow-tooltip自定义样式

在使用element ui table 组件时，表格td内容太多可设置show-overflow-tooltip参数来控制显示方式，默认配置显示如下

该显示方式不满足需求，需要自定义样式

删除show-overflow-tooltip配置，通过template里面自定义el-popover组件，placement参数为显示位置，v-html绑定的是popover显示内容，slot="reference"为table中该行显示内容，对应给两个class设置如下样式。给popover内容设置固定宽度，给表格内容设置超出两行显示…

.set-popper {
  width: 431px;
}
.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

最终展示效果：