el-table de expand

### 关于 `el-table` 组件中的 `expand` 功能 #### 解决方案的具体思路 为了实现 `el-table` 中的展开行功能并异步加载数据，可以监听 `expand-change` 事件，在该事件触发时执行相应的逻辑来获取和展示子表单的数据[^1]。 #### 代码示例 下面是一个简单的例子展示了如何配置 `el-table` 来支持可扩展行以及通过 `expand-change` 实现异步加载： ```html <template> <div id="app"> <!-- 定义表格 --> <el-table :data="tableData" @expand-change="handleExpandChange" style="width: 100%"> <el-table-column type="expand"> <template slot-scope="props"> <p v-if="!props.row.loading">{{ props.row.subTable }}</p> <span v-else>Loading...</span> </template> </el-table-column> <el-table-column label="日期" prop="date"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-03', name: 'Tom' }, { date: '2016-05-02', name: 'John' } ] }; }, methods: { handleExpandChange(row, expandedRows) { row.loading = true; setTimeout(() => { // 模拟异步请求 this.$set(row, "subTable", "<h4>这里是额外的信息。</h4>"); row.loading = false; }, 2000); } } }; </script> ``` 此段代码创建了一个具有两列的基础表格，并允许用户点击每行左侧的小箭头以查看更多详情。当某一行被选中展开时会调用 `handleExpandChange()` 方法模拟发起一次网络请求去拉取附加信息；实际应用中应当替换为真实的 API 调用来取得所需资料。 另外，如果想要自定义折叠/展开图标的外观，则可以通过覆盖默认 CSS 类的方式完成这一需求。例如，这里提供了用于更改图标样式的 SCSS 片段[^2]: ```scss <style lang="scss" scoped> /* 取消原本展开的旋转动效 */ /deep/.el-table__expand-icon{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } /* 设置未点击状态下的样式 */ /deep/.el-table__expand-icon .el-icon-arrow-right:before{ content: "\e6d9"; border: 1px solid #ccc; padding: 1px; } /* 已经点击后的样式 */ /deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before{ content: "\e6d8"; } </style> ``` 上述样式将会把原来的上下翻转动画移除，并分别设置成加号（未展开）和减号（已展开），同时给这些符号加上边框装饰。