iview表头中添加图标悬浮提示错位问题

问题描述

iview表格里，renderHeader中写的tooltip错位

关键参数 ( transfer : true )

iview的Tooltip组件里，有一个属性transfer，表示：是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果，renderHeader中写的tooltip错位问题解决。

具体配置

{
  key: 'your column name',
  title: '列名',
  renderHeader: (h, params) => {
    return h('div', [
      h('span', params.column.title),
      h('Tooltip', {
        props: {
          content: '您希望展示的提示语',
          transfer: true,
          maxWidth: '220',
          theme: 'light'
        }
      }, [
        h('Icon', {
          props: {
            type: 'md-help-circle',
            color: "#c8c8c8",
            size: "20"
          },
          class: {iconClass: true}
        })
      ]),
    ])
  }
}

基础解析

transfer为false的时候，弹窗是放在ivue-tooltip内的：

Transfer为true的时候，弹窗内容是放在body内的：