vxe-table vxe-column实现多级表头

vxe-table和vxe-column是基于Vue.js的表格组件，可以实现多级表头。下面是一个示例代码，演示了如何使用vxe-table和vxe-column实现多级表头：

<template>
  <vxe-table :data="tableData" border show-header>
    <vxe-column type="index" title="序号"></vxe-column>
    <vxe-column title="基本信息">
      <vxe-column title="姓名" field="name"></vxe-column>
      <vxe-column title="年龄" field="age"></vxe-column>
    </vxe-column>
    <vxe-column title="联系方式">
      <vxe-column title="电话" field="phone"></vxe-column>
      <vxe-column title="邮箱" field="email"></vxe-column>
    </vxe-column>
    <vxe-column title="操作">
      <vxe-column title="编辑" :render-header="renderEditHeader"></vxe-column>
      <vxe-column title="删除" :render-header="renderDeleteHeader"></vxe-column>
    </vxe-column>
  </vxe-table>
</template>

<script>
import 'vxe-table/lib/style.css';
import { VXETable } from 'vxe-table';

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, phone: '123456789', email: 'zhangsan@example.com' },
        { name: '李四', age: 25, phone: '987654321', email: 'lisi@example.com' },
      ],
    };
  },
  methods: {
    renderEditHeader({ column }) {
      return <span>{column.title}（编辑）</span>;
    },
    renderDeleteHeader({ column }) {
      return <span>{column.title}（删除）</span>;
    },
  },
  mounted() {
    VXETable.setup({
      size: 'mini',
    });
  },
};
</script>

在上面的代码中，我们使用了vxe-table和vxe-column组件来创建一个表格。通过嵌套vxe-column组件，我们可以实现多级表头。每个vxe-column组件都代表一个表头列，可以设置title属性来定义列的标题，field属性来指定列对应的数据字段。

在示例中，我们创建了一个基本的表格，包含了基本信息和联系方式两个多级表头。每个表头列都可以自定义渲染，通过render-header属性来指定渲染函数。