记录一下ElementUI的使用

### 如何在Element UI中使用Table组件 #### 使用多级表头展示复杂数据结构 当面对较为复杂的表格数据时，采用多级表头能够更好地体现数据间的层次关系。借助`el-table-column`标签的嵌套方式，在Element-UI框架下轻松构建出具有复合表头特性的表格[^1]。 ```html <template> <div> <el-table :data="tableData"> <!-- 多级表头 --> <el-table-column label="日期" prop="date"></el-table-column> <el-table-column label="配送信息"> <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="地址" prop="address"></el-table-column> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, // 更多条目... ] } } } </script> ``` 此代码片段展示了创建一个多级表头的具体做法，其中内部列被放置在外层`el-table-column`内以形成父子关系。 #### 实现分页并记忆选中状态功能 对于需要保持用户交互一致性的应用场景而言，即使页面切换也应保留之前的选择记录。为此目的设计了一组辅助函数来追踪已选项，并确保这些选择不会因浏览不同页码而丢失[^2]。 虽然具体实现细节未在此处详述，但通常涉及监听事件、存储索引列表以及恢复先前选定项的过程。 #### 构建带有展开行的嵌套表格布局 为了更直观地呈现关联性强的数据集，可以通过配置`type="expand"`属性向每一行添加一个可折叠/展开的操作按钮。一旦触发，则会展现出额外的相关详情或次级表格内容[^3]。 ```html <template> <div> <el-table :data="mainTableData" style="width: 100%"> <el-table-column type="expand"> <template slot-scope="props"> <el-table :data="props.row.children || []"> <el-table-column property="subItemName" label="子项目"></el-table-column> </el-table> </template> </el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { mainTableData: [ { id: 1, name: "张三", age: 24, children: [{ subItemName: "子项目A" }] }, // 其他条目... ], }; }, }; </script> ``` 上述实例说明了怎样利用扩展特性增强用户体验的同时维持清晰易读的信息架构。