Element Plus组件库el-table单元格内容超出时tooltip显示优化

前情

---

公司有经常需要做一些后台管理页面，我们选择了Element Plus，它是基于 Vue 3，面向设计师和开发者的组件库，是Vue框架生态中比较火的UI组件库，组件库丰富易用，组件链接：一个 Vue 3 UI 框架 | Element Plus，对于在使用el-table的时候，设置show-overflow-tooltip，当单元格内容超出宽度的时候显示省略号同时当鼠标移入会通过tootip显示单元格全内容。

坑位

---

在使用show-overflow-tooltip显示全内容的时候，发现tips的宽度你是没有可配置项的，它默认会在一行显示全内容直到铺满整个屏幕，非常影响观感体验，示例图如下：

Why?

---

特意看了一下el-tooltip的页面上结构，发现它是通过inset和transform来控制位置的，并没有限制宽度的地方，如果去掉transform它就是fixed左边left为0，右边right为auto,当内容足够多，它会一直到占满整屏，所以才出现了上面的超长提示框问题，关键代码如下:

<div 
class="el-popper is-dark " 
style="z-index: 2035; position: fixed; inset: auto auto 0px 0px; margin: 0px; transform: translate(551px, -370px);" 
data-popper-escaped="" 
data-popper-placement="top"
>
	提示内容...
	<div 
		class="el-popper__arrow" 
		style="position: absolute; left: 0px; transform: translate(222px, 0px);"
	></div>
</div>

解决方案1

对于后台项目，对UI和交互一直都不是特别严格的，既然它自带的el-tooltip有问题，那我们就干脆摒弃它，html有个自带的属性可以同样实现鼠标移入提示效果，那就是title属性，关键代码如下：

<template>
  <el-table :data="list" border>
  	<el-table-column label="内容">
      <template v-slot={ row }>
				<div :title="row.process" class="oneLine">{{ row.process }}</div>
      </template>
    </el-table-column>
	</el-table>
</template>

解决方案2

---

自带的不香，又想要el-tooltip效果，那我们自己针对单元格内容使用el-tooltip，不使用表格默认的，关键代码如下：

<template>
  <el-table :data="list" border>
  	<el-table-column label="内容">
      <template v-slot={ row }>
        <el-tooltip effect="dark" placement="top">
          <template #content>
	          <p>{{row.process}}</p>
          </template>
          <div class="oneLine">
            {{ row.process }}
          </div>
        </el-tooltip>
      </template>
    </el-table-column>
	</el-table>
</template>

解决方案3

其实表格的show-overflow-tooltip工作基本是正常的，只是在宽度上不尽如人意，那我们为什么不想办法调整它的宽度了，于是想到我们可以通过重写样式来达到自己满意的结果，关键代码如下：

 .smstemplate-config {
  ::v-deep(.el-popper) {
    max-width: 640px;
    word-break: break-all;
  }
}

总结

个人推荐使用第三种，侵入性小，修改工作量也是最小的，也是我用的方式，当然上面三种方式都能解决问题，可以根据自己的实际情况来决定使用哪一种方式，解决此的方法也绝不止上面三种，如果你有更好的解决方案欢迎留言一起讨论。