elementUI的el-table自定义表头

在Element UI中，可以通过使用<el-table-column>的render-header属性来自定义表头。这个属性接受一个函数，该函数返回VNode（虚拟节点），可以用来定义复杂的表头内容。

下面是一个简单的例子，展示如何使用render-header属性来自定义表头：

<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"
      label="地址"
      :render-header="renderHeader">
    </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('span', [
          h('i', { class: 'el-icon-time' }),
          ' 自定义地址'
        ]),
        // 可以添加更多内容，比如工具提示等
        h('el-tooltip', { props: { content: '这是一个工具提示', placement: 'top' } }, [
          h('i', { class: 'el-icon-question' })
        ])
      ];
    }
  }
}
</script>

在这个例子中，renderHeader方法使用了h函数（即hyperscript函数）来创建一个包含图标和文字的表头。同时，你也可以添加其他VNode，如工具提示等复杂组件。这样就可以实现自定义表头的需求。