Element-UI 中<el-tooltip>组件的使用

功能：鼠标hover上去，出现悬浮标签显示出完整的文本内容，鼠标移走悬浮标签消失。 通过查阅 Element-UI文档 ，我们可以知道el-tooltip组件的使用方法：

<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
	<el-button>上左</el-button>
</el-tooltip>

如果在某处单独使用，没有问题，可以轻松实现。

但是如果在el-table的cell中使用呢？并且要求文本只有溢出时才有tooltip的功能，文本很短，不需要tooltip的效果。

• 使用el-table的属性：show-overflow-tooltip, 当它为true时，鼠标放在溢出文本的cell上时就会出现tooltip的效果，并且溢出的文本会以省略号的形式展示

请注意，此时cell的文本只能是一行，溢出则以省略号结尾。

如果此时需求是： + 最多展示多行（比如两行） + 超过两行时以省略号结尾 + 超过两行才触发tooltip效果

我们可以借助Vue的指令来实现此功能：

table-cell的内容是slot插槽，每个cell加上指令v-table-cell,指令的内容如下：

const getTooltipElement = (content) => {
  const newElement = new Vue({
    el: document.createElement('div'),
    template: `
      <div \
        role="tooltip" \
        class="el-tooltip__popper is-dark" \
        style="width: 0; height: 0; transform-origin: center bottom; visibility: hidden;"> \
        {{ content }} \
        <div x-arrow="" class="popper__arrow"></div> \
      </div> \
    `,
    data: { content }
  })
  return newElement.$el
}

const handleTooltipElement = (vnode) => {
  const spanElement = vnode.elm
  const spanParentElement = spanElement.parentElement
  const content = spanElement.textContent
  if (spanParentElement.length > 1) {
    spanParentElement.remove[spanParentElement.children[1]]
  }
  // 文字未溢出则忽略后续操作
  if (spanElement.clientHeight === spanElement.scrollHeight) {
    return
  }
  const newElement = getTooltipElement(content)
  spanParentElement.appendChild(newElement)
}

Vue.directive('table-cell', {
  inserted: function(el, binding, vnode) {
    const spanElement = vnode.elm
    spanElement.classList.add('table-cell-text')
    handleTooltipElement(vnode)
  },
  componentUpdated: function(el, binding, vnode) {
    handleTooltipElement(vnode)
  }
});

其中table-cell-textcss类的样式为：

white-space: normal; // 不可以是nowrap，否则无法换行。
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // 最多两行，可以是n行。
-webkit-box-orient: vertical;

总的来说，element自带的table-cell中的tooltip样式，只能是单行的，如果简单添加上述多行的样式，tooltip就会失效。 所以如果我们要想实现多行就必须在dom节点插入和更新时在对应的文本节点(span)的父节点插入element的tooltip元素，使用这个tooltip元素来展示出tooltip。当然show-overflow-tooltip这个属性也一定要设置为true。