element-ui table 表头字段增加tooltip 使用render-header 如何自定义html格式的content

在Element UI中，`table`组件的表头列可以使用`render-header`属性来自定义渲染内容，包括添加`tooltip`提示。如果你想为表头字段创建一个HTML格式的提示，你可以这样做：

首先，在`render-header`函数中接收表头项的数据，然后返回一个包含HTML元素的对象。例如，假设你想显示一个带有`title`属性的`<span>`标签，并附带`tooltip`提示：

<template>
  <el-table-column
    prop="yourColumn"
    label="Your Label"
    :render-header="customRenderHeader"
  />
</template>

<script>
export default {
  methods: {
    customRenderHeader(h, { column, $index }) {
      return h('span', {
        domProps: {
          title: `这是第${$index + 1}行的自定义提示 - ${column.title}`,
        },
        // 这里是你要展示的HTML内容
        innerHTML: `<i class="el-icon-question" style="cursor: pointer;"></i> HTML 格式内容`,
      });
    }
  }
};
</script>

在这个例子中，`innerHTML`属性用于设置HTML字符串，`title`属性则定义了`tooltip`提示。当用户将鼠标悬停在`<i>`图标上时，会显示 tooltip。