ElementUI el-table自定义表头图标、悬停提示

在ElementUI的el-table组件中，可以通过使用el-table-column的render-header属性来自定义表头，并通过el-tooltip组件实现悬停提示。以下是一个简单的示例：

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 自定义表头，含有图标和悬停提示 -->
    <el-table-column
      prop="address"
      :render-header="renderHeader"
      width="300">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  },
  methods: {
    renderHeader(h, { column }) {
      return h('el-tooltip', {
        props: {
          effect: 'dark',
          content: '地址信息',
          placement: 'top'
        }
      }, [
        column.label,
        h('i', { class: 'el-icon-info' })
      ])
    }
  }
}
</script>

在这个示例中，我们定义了一个名为renderHeader的方法，该方法使用Vue的h函数来创建一个包含图标和悬停提示的表头。el-tooltip组件用于实现悬停提示，effect属性定义了主题样式，content属性设置提示文本，placement属性定义了提示框的位置。图标是通过i标签和对应的类名el-icon-info添加的。