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

 

问题描述:

以下是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' })])]
    );

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


 

第 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 值。


String result = httpRequest .post("https://example.com") .timeout(5 ...