ant-design嵌套子表格实现每次只展开一个子表格（点击新的子表格收起原展开的子表格）

### 实现带有垂直列标题的嵌套子表格 为了实现在 Ant Design Vue 中创建带有垂直列标题的嵌套子表格，可以按照以下方法操作： #### 使用 `expandedRowKeys` 和 `expand` 控制展开状态 通过设置 `expandedRowKeys` 来控制哪些行被展开，并利用组件提供的 `expand` 方法来处理用户的交互行为[^1]。 ```javascript // JavaScript部分 export default { data() { return { expandedRowKeys: [], // 存储当前已展开的行键值数组 columns: [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' } ], data: [...], // 父表数据源 innerColumns: [{title:'Child Name', dataIndex:'childName'}], innerData:[...] // 子表数据源 }; }, methods:{ onExpand(expanded, record){ this.expandedRowKeys = expanded ? [record.key] : []; } } } ``` #### 设置子表格样式以实现垂直显示列头 对于希望让子表格内的某些特定列呈现为纵向布局的情况，则可以通过 CSS 自定义样式来进行调整。这里给出一种简单的解决方案——旋转文字方向并改变单元格宽度使其适应新布局的需求[^2]。 ```css /* 添加至全局或局部CSS文件 */ .components-table-demo-nested .ant-table-thead>tr>th.vertical-column{ writing-mode: vertical-lr; white-space: nowrap; padding:0px !important; } .components-table-demo-nested td[colspan="auto"]{ /* 针对跨多列情况下的特殊处理*/ text-align:center; } ``` #### HTML模板结构 最后，在HTML模板中应用上述配置好的属性以及类名即可完成整个功能模块的设计. ```html <a-table :columns="columns" :data-source="data" :expanded-row-keys.sync="expandedRowKeys" @expand="onExpand"> <!-- 定义父级表格的操作按钮 --> <template slot="operation" slot-scope="text">{{text}}</template> <!-- 渲染子表格 --> <a-table v-if="expandedRowKeys.length > 0 && expandedRowKeys.includes(record.key)" slot="expandedRowRender" slot-scope="record" :columns="innerColumns.map(col => ({...col, className: col.title === 'Child Name'? 'vertical-column': ''}))" :data-source="innerData.filter(item=>item.parentId===record.id)" :pagination="false"/> </a-table> ```