把el-table-column遍历生成
时间: 2023-10-24 20:06:31 浏览: 418
可以使用 `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-column 遍历图片
可以使用作用域插槽来自定义 el-table-column 的内容,然后在插槽中遍历图片。具体实现可以参考以下代码:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="图片">
<template slot-scope="scope">
<div v-for="image in scope.row.images">
<img :src="image" alt="">
</div>
</template>
</el-table-column>
</el-table>
```
其中,`tableData` 是表格数据,每一行数据中都有一个 `images` 属性,它是一个数组,存储了该行对应的图片链接。
el-table-column遍历数组
可以使用 v-for 指令来遍历数组,然后在 el-table-column 中使用 prop 属性来绑定数据。例如:
```html
<el-table :data="tableData">
<el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
</el-table>
```
其中,columns 是一个数组,包含了每一列的属性和标签信息。tableData 是要展示的数据数组。
阅读全文