前端 - 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' })])] );
我看明明是挂载到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 ...