el-table套table
时间: 2023-10-02 10:05:26 浏览: 93
el-table套table是一种常见的需求,可以通过嵌套表格的方式实现。在代码中,可以使用el-table-column组件的slot-scope属性来定义嵌套表格的内容。具体的实现步骤如下:
1. 在外层el-table-column组件中,使用template标签,并设置slot-scope="scope"来获取当前行的数据。
2. 使用v-if条件判断,判断当前行的algorithmParameter是否存在且不为空数组。
3. 在v-if条件为真的情况下,使用el-table组件来创建嵌套表格。设置:data属性为scope.row.algorithmParameter,即当前行的algorithmParameter数据。
4. 在el-table中,使用el-table-column组件来定义嵌套表格的列。可以设置type为index来显示序号列,prop属性来指定数据字段,label属性来设置列名。
5. 在样式中,可以使用::v-deep来穿透样式作用域,设置特定的样式。例如,可以使用.table ::v-deep .el-table--medium .el-table__cell来设置表格单元格的padding为0。
6. 对于后端返回的字符串格式的数组,可以使用JSON.parse()方法将其转换为数组格式。在编辑提交时,需要将数组转换为字符串格式传给后端。
综上所述,可以根据以上代码和步骤来实现el-table套table的需求。
#### 引用[.reference_title]
- *1* *2* [表格(el-table)里面嵌套表格(el-table)](https://blog.csdn.net/song_song0927/article/details/128531627)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文