后端传回的数据 如何在el-table-expand中展示
时间: 2023-06-15 09:03:10 浏览: 134
要在 `el-table-expand` 中展示后端传回的数据,可以使用该组件的 `render` 属性,自定义每个展开行的内容。
具体步骤如下:
1. 在表格的 `columns` 属性中添加需要展开的列,例如:
```javascript
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{
label: '详情',
width: 100,
render: (row) => {
return (
<el-table-expand-row>
<div>{ row.detail }</div>
</el-table-expand-row>
)
}
}
]
```
其中,`render` 函数返回一个 JSX 元素,该元素包含 `el-table-expand-row` 组件,用于展示展开行的内容。在这个例子中,我们使用了 `row.detail` 展示了后端传回的详情信息。
2. 在表格的 `data` 属性中添加每个数据行的 `detail` 属性,例如:
```javascript
data: [
{ name: '张三', age: 20, detail: '这是张三的详情信息' },
{ name: '李四', age: 25, detail: '这是李四的详情信息' },
{ name: '王五', age: 30, detail: '这是王五的详情信息' }
]
```
这样,当用户点击展开按钮时,就会显示每个数据行的详情信息。
注意:在使用 `el-table-expand` 组件时,需要确保每个数据行的数据格式与 `columns` 属性中定义的列对应。如果后端传回的数据格式不一致,需要在前端进行数据处理,将其转换为正确的格式。
阅读全文