el-table-column绑定多个数据
时间: 2023-11-23 20:57:44 浏览: 137
实现多列数据绑定
5星 · 资源好评率100%
el-table-column可以通过v-for指令循环绑定多个数据。下面是两种方法:
1. 使用v-for循环绑定tableDataline字段:
```html
<el-table :data="tableData">
<el-table-column v-for="item in tableDataline" :key="item.field" :prop="item.field" :label="item.label"></el-table-column>
</el-table>
```
在这个例子中,tableDataline是一个数组,每个元素都包含了字段的相关信息,例如字段名、字段标签等。通过v-for循环遍历tableDataline数组,将每个元素的字段名、字段标签等信息绑定到el-table-column组件的相应属性上。
2. 将data中的infolist赋值给tableDataline:
```javascript
data() {
return {
tableData: [],
infolist: [
{ field: 'name', label: '姓名' },
{ field: 'age', label: '年龄' },
{ field: 'gender', label: '性别' }
]
}
},
computed: {
tableDataline() {
return this.infolist;
}
}
```
在这个例子中,我们将infolist数组赋值给tableDataline。然后在el-table-column中使用tableDataline数组进行循环绑定。
阅读全文