在table单元格中 循环遍历数组的每一个对象信息 在elementUI下做
时间: 2024-05-10 18:18:31 浏览: 17
可以使用 element-ui 的 `<el-table>` 组件来渲染表格,然后在表格的每个单元格中使用 slot-scope 来自定义单元格的内容。
例如,假设你有一个数组 `list`,其中每个元素都包含 `name` 和 `age` 两个属性,你可以如下方式在表格中展示:
```html
<template>
<el-table :data="list">
<el-table-column label="姓名">
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
{{ scope.row.age }}
</template>
</el-table-column>
</el-table>
</template>
```
这里使用了 `<el-table>` 和 `<el-table-column>` 组件来渲染表格,`list` 数组作为表格的数据源,每个列使用 `slot-scope` 来访问 `scope.row` 对象,其中 `scope.row` 表示当前行的数据对象,通过 `.name` 和 `.age` 属性访问每个对象的属性值。
你可以根据自己的需求修改表格的列数、列名和单元格内容等。
相关问题
在elementUI的el-table-column组件下使用v-for 循环 数组productInfoLis 中的对象
可以通过使用 `v-for` 循环遍历数组 `productInfoLis` 中的对象,然后在 `el-table-column` 组件中使用对象的属性作为列的数据源。
例如:
```html
<template>
<el-table :data="productInfoLis">
<el-table-column v-for="(item, index) in productInfoLis" :key="index" :label="item.name">
<template slot-scope="scope">
{{ item[scope.column.property] }}
</template>
</el-table-column>
</el-table>
</template>
```
在上面的示例中,我们使用 `v-for` 循环遍历了 `productInfoLis` 数组中的每一个对象,然后在 `el-table-column` 组件中使用 `item.name` 作为列的标签名,并且通过 `scope.column.property` 获取列对应的属性名,最后通过 `item[scope.column.property]` 获取该属性的值,显示在表格中。
使用v-for 循环 数组productInfoLis 中的对象 在elementUI的el-table-column组件下
可以这样写:
```html
<el-table :data="productInfoList">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
<el-table-column prop="stock" label="库存"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column>
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
<el-button @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
```
其中,`productInfoList` 是你的数组名称,`prop` 属性指向对象中的属性名,`label` 属性用于表头的显示,`slot-scope="scope"` 表示作用域插槽,可以访问当前行的数据,`handleEdit` 和 `handleDelete` 是你自己定义的方法,用于处理编辑和删除操作。