el-table遍历数据让他对应表格内相应属性渲染
时间: 2023-08-05 15:09:44 浏览: 53
在使用 `el-table` 组件时,可以通过 `v-for` 遍历数据,并使用 `:prop` 属性来指定表格中每列要渲染的数据项。
例如,假设我们有以下数据:
```javascript
data: [{
id: 1,
name: '张三',
age: 18
}, {
id: 2,
name: '李四',
age: 20
}, {
id: 3,
name: '王五',
age: 22
}]
```
我们可以使用以下代码将数据渲染到表格中:
```html
<el-table :data="data">
<el-table-column label="ID" prop="id"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
```
在上述代码中,我们使用 `:data` 属性将数据传递给 `el-table` 组件,然后使用 `el-table-column` 组件来指定每列要渲染的数据项,其中 `label` 属性用于指定列头显示的文本,`prop` 属性用于指定要渲染的数据项的属性名。
这样,当数据发生变化时,表格会自动更新并重新渲染。
相关问题
把el-table-column遍历生成
可以使用 `v-for` 循环渲染 `el-table-column` 组件,例如:
```html
<el-table :data="tableData">
<el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
</el-table>
```
在上面的代码中,`tableData` 是表格数据,`tableColumns` 是表格列的配置数组。使用 `v-for` 循环渲染 `el-table-column` 组件时,需要设置 `:key` 属性为列的唯一标识符 `prop` 属性,同时设置 `:prop` 属性为列对应的数据字段,设置 `:label` 属性为列的标题。这样就可以动态生成表格列了。
el-table prop是数组如何让表格多行展示数组里面的数据
如果 `el-table` 中的 `prop` 是一个数组,需要使用 `scoped slot` 来展示数组中的数据。可以使用 `v-for` 循环来遍历数组,然后在 `scoped slot` 中将每个元素渲染成一行数据。
举个例子,假设 `prop` 是一个包含对象的数组,每个对象有 `name` 和 `age` 两个属性,那么可以这样写:
```html
<el-table :data="tableData">
<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>
```
在这个例子中,`tableData` 是一个包含对象的数组,每个对象有 `name` 和 `age` 两个属性。使用 `v-for` 循环遍历数组中的每个元素,然后在 `scoped slot` 中将每个元素渲染成一行数据。在 `scoped slot` 中,可以通过 `scope.row` 访问到当前行的数据。