在 element-ui 中渲染自定义 header 以显示 bootstrap 工具提示？

Question

我尝试在 element-ui table.

的 header 中呈现 bootstrap 工具提示 (https://bootstrap-vue.js.org/docs/components/tooltip/)

我使用自定义 header 渲染方法：

<el-table-column
  v-for="(column, index) in headers"
  :render-header="renderHeader"
/>

除了缺少 id 之外，以下代码按预期呈现。出于调试目的，我添加了一个按预期呈现的 class：

renderHeader(h, { column }) {
  return h(
    'div',
    {
      id: `tooltip-target__${column.property}`,
      class: 'some-class'
    },
    [
      column.label,
      h(
        'b-tooltip',
        {
          attrs: {
            triggers: 'hover',
            target: `tooltip-target__${column.property}`
          }
        },
        column.label
      )
    ]
  );
},

Answer 1

需要在attrs对象内部定义id：

renderHeader(h, { column }) {
  return h(
    'div',
    {
      attrs: {
        id: `tooltip-target__${column.property}`
      }
      class: 'some-class'
    },
    [
      column.label,
      h(
        'b-tooltip',
        {
          attrs: {
            triggers: 'hover',
            target: `tooltip-target__${column.property}`
          }
        },
        column.label
      )
    ]
  );
},

我在文档中找到了一个很好的例子： https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

在 element-ui 中渲染自定义 header 以显示 bootstrap 工具提示？

Render custom header in element-ui to show bootstrap tooltip?

vue.js

vuejs2

bootstrap-vue

element-ui