前端 - el-table源码是怎么把el-tooltip挂载到body下的？

Question

以下是elmentui2的源码：

    return h(
      'table',
      {
        'class': 'el-table__body',
        attrs: { cellspacing: '0',
          cellpadding: '0',
          border: '0' }
      },
      [h('colgroup', [this.columns.map(function (column) {
        return h('col', {
          attrs: { name: column.id },
          key: column.id });
      })]), h('tbody', [data.reduce(function (acc, row) {
        return acc.concat(_this.wrappedRowRender(row, acc.length));
      }, []), h('el-tooltip', {
        attrs: { effect: this.table.tooltipEffect, placement: 'top', content: this.tooltipContent },
        ref: 'tooltip' })])]
    );

我看明明是挂载到tbody下的，为什么悬浮提示的时候显示的是在body节点下？而且每次都销毁之前的创建一个新的，这种做法是怎么做到的？

Answer 1

因为用的是 el-tooltip 这个组件呀，你得去看 el-tooltip 这个组件的业务代码 �� element/packages/tooltip/src/main.js at dev · ElemeFE/element · GitHub

可以看到绑定的鼠标事件上面修改了 showPopper 的值，但是没有其他和 showPopper 有关的业务逻辑代码了，所以怀疑到通过 mixins 混入了的 element-ui/src/utils/vue-popper 这个JS文件上面。

简单查看一下代码逻辑，就能看到 showPopper 值变动时会触发 updatePopper 这个函数，updatePopper 的业务逻辑就很简单，就判断了一下是否是服务端渲染，如果不是则执行 createPopper 这个函数。到这里就很明确了，中间有一行
if (this.appendToBody) document.body.appendChild(this.popperElm)。

判断的这个 appendToBody 是从外部 props 下来的，如果没有明确声明默认就是 true 值。