vue3 table纵向表头

Vue3中的Table组件通常用于展示数据列表，如果需要实现纵向表头（也称为列头旋转或交叉布局），可以借助第三方库如`vue-virtual-table`或自定义组件结合Vue的响应式特性来完成。

`vue-virtual-table`是一个高性能的虚拟滚动表格组件，它支持复杂的列布局，包括纵向表头。你可以在项目中安装这个库，然后按照文档配置纵向表头：

npm install vue-virtual-table

在组件中，你可以这样设置：

<template>
  <vvt-table :data="tableData" :columns="columnDefs">
    <!-- 使用v-for遍历列定义 -->
    <template v-for="(colDef, index) in columnDefs">
      <vvt-column :key="index" :width="colDef.width" :header="colDef.title ? colDef.title + ' (' + colDef.type + ')' : ''" :type="colDef.type" :rotated="true">
        <template slot-scope="scope">
          <span>{{ scope.row[colDef.field] }}</span>
        </template>
      </vvt-column>
    </template>
  </vvt-table>
</template>

<script>
import VVTTable from 'vue-virtual-table';

export default {
  components: { VVTTable },
  data() {
    return {
      tableData: [], // 填充实际数据
      columnDefs: [
        { title: '姓名', field: 'name', type: 'string', rotated: true },
        { title: '年龄', field: 'age', type: 'number', rotated: true },
        // 更多列...
      ]
    };
  }
};
</script>

记得在`v-model`绑定的数据更新后，`tableData`和`columnDefs`也要相应地调整。