el-table 纵向表头

### 关于 `el-table` 组件中纵向表头的实现 在 Vue 和 Element UI 中，要使 `el-table` 的表头呈现为纵向布局，可以采用一种间接的方法。通常情况下，表格是以横向的方式展示数据，即每一行为一条记录，而每列为不同的属性字段。为了达到纵向的效果，可以通过调整数据结构并利用 CSS 或者 HTML 结构上的变化来完成这一目标。 对于具体的实现方案，在处理数据源方面，如果原始数据是标准的对象数组形式，则需要转换成适合纵向显示的形式[^3]。这意味着原本作为列名的部分现在应该成为单独的一列，并且其他各列则对应着不同行的数据项。下面给出一段简单的代码示例说明如何构建这样的数据集： ```javascript // 原始数据 const originalData = [ { name: 'Tom', age: 20, address: 'No.189, Grove St, Los Angeles' }, { name: 'Jerry', age: 22, address: 'No.89, Wall Street, New York'} ]; // 转换成适用于纵向表头的数据格式 function transformData(data) { const keys = Object.keys(data[0]); let transformed = []; // 添加表头信息 transformed.push({ key: '', value: '' }); data.forEach((item, index) => { transformed[index + 1] = { key: `Row ${index + 1}`, value: '' }; }); // 构建新的数据体 keys.forEach(key => { transformed.push({ key, ...data.map(item => ({value: item[key]})) }); }); return transformed; } let processedData = transformData(originalData); ``` 接着就是创建对应的模板部分了。这里需要注意的是，由于我们改变了传统的行列关系，因此可能还需要额外设置一些样式来自定义表格外观，使其更接近预期的设计效果。以下是基于上述加工后的数据所编写的一个简单例子： ```html <template> <div class="vertical-header-table"> <!-- 使用 el-table-column 来表示原来的行 --> <el-table :data="processedData.slice(1)" style="width: 100%"> <el-table-column prop="key" label="" width="100"></el-table-column> <!-- 动态生成剩余的列 --> <el-table-column v-for="(row, rowIndex) in processedData" :key="'col-' + rowIndex" :label="row.key === undefined ? row.value : ''"> <template slot-scope="scope"> {{ scope.row['value'] }} </template> </el-table-column> </el-table> </div> </template> ``` 此段代码展示了如何通过改变数据模型配合特定的渲染逻辑来达成纵向表头的目的。值得注意的是，这只是一个基础版本的例子；实际应用时可以根据需求进一步优化和完善功能特性，比如增加响应式设计、增强交互体验等。