ElementUI Table实现多行省略，鼠标移动上去显示所有文字内容

ElementUI table文字超出一行，隐藏多余文字，移入显示tips。

今天写项目的时候，实现在table里面的文字过长，需要做悬浮文字提示的功能

给el-table-column设置**:show-overflow-tooltip="true"**属性可以使单元格超出的内容自动折叠显示，当鼠标移入时单元格的上方会自动弹出一个小tips来显示单元格得所有内容。

  <el-table-column prop="taskName" label="任务名称" width="180" :show-overflow-            
    tooltip="true" >
  </el-table-column>

这样写很简洁，不需要额外用插槽来写。就很nice！

如果你觉得展示的文字过长的时候，像下面这样，文字过多视觉体验不是很好，

tips的class名为.el-tooltip__popper，开始我试着直接通过它class名来给tips设置样式。

<style lang="scss" scoped>
.el-tooltip__popper{
  max-width:20%
}
</style>

发现并没有效果，后来发现是因为scoped导致的。但是如果去掉scoped样式，那么这个组件的其他style样式就会影响到所有组件。所以我们需要新建一个style标签来修改tips的样式。

<style>
.el-tooltip__popper{
  max-width:20%
}
</style>

这样设置就可以生效了。