el-table-column怎么放入数组对象里的数组对象
时间: 2024-03-15 12:22:55 浏览: 101
可以使用作用域插槽来实现将数组对象里的数组对象放入el-table-column中。具体实现步骤可以参考以下代码示例:
```html
<el-table :data="tableData">
<template v-for="(item, index) in tableColumns" v-slot:[`column-${index}`]="{row}">
<el-table-column :prop="item.prop" :label="item.label">
<template v-if="Array.isArray(row[item.prop])">
<el-table :data="row[item.prop]">
<template v-for="(subItem, subIndex) in subColumns" v-slot:[`column-${subIndex}`]="{row}">
<el-table-column :prop="subItem.prop" :label="subItem.label"></el-table-column>
</template>
</el-table>
</template>
</el-table-column>
</template>
</el-table>
```
其中,`tableData`为整个表格的数据源,`tableColumns`为表格列的数据源,`subColumns`为嵌套表格列的数据源。需要注意的是,在作用域插槽中使用`:prop="item.prop"`来动态绑定prop属性,使得不同的列可以根据不同的数据源实现动态展示。当某一列对应的值为数组时,就可以通过判断数组类型来进行嵌套渲染,并将子数组作为嵌套表格的数据源,从而实现将数组对象里的数组对象放入el-table-column中的效果。
阅读全文