vue3设置表头多行显示

在Vue3中，设置表头多行显示可以通过使用Element Plus UI库中的`<el-table>`组件来实现。Element Plus是一个基于Vue 3的UI框架，它提供了许多现成的组件，包括表格组件。

要在Vue3中使用Element Plus并设置表头多行显示，你可以按照以下步骤操作：

1. 首先，确保你的项目中已经安装了Element Plus。如果还没有安装，可以使用npm或yarn来安装：

   npm install element-plus --save
   # 或者
   yarn add element-plus

2. 在你的Vue组件中引入Element Plus，并在组件中使用`<el-table>`和`<el-table-column>`标签来创建表格。为了实现多行表头，你可以在`<el-table-column>`标签内嵌套更多的`<el-table-column>`标签。

下面是一个示例代码，展示了如何在Vue3中使用Element Plus设置一个具有多行表头的表格：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期">
      <template #header>
        <div>
          <span>主标题</span>
          <span>子标题1</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名">
      <template #header>
        <div>
          <span>主标题</span>
          <span>子标题2</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
      <template #header>
        <div>
          <span>主标题</span>
          <span>子标题3</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

const tableData = ref([
  { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
  { date: '2016-05-04', name: '张小三', address: '北京市朝阳区芍药居街道' },
]);
</script>

在这个示例中，每个列的表头都通过`<template #header>`插槽自定义了内容，其中包含了两个`<span>`元素，分别代表主标题和子标题。这样可以实现表头的多行显示效果。