el-table循环渲染表头
时间: 2023-08-08 14:06:18 浏览: 132
vue el-table实现自定义表头
可以使用 `v-for` 指令循环渲染 `el-table-column` 组件来实现循环渲染表头。
示例代码如下:
```html
<template>
<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>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 22 },
{ name: 'Jane', age: 33 }
],
columns: [
{ prop: 'name', label: 'Name' },
{ prop: 'age', label: 'Age' }
]
}
}
}
</script>
```
在上面的示例中,我们使用 `v-for` 指令循环渲染 `el-table-column` 组件,其中 `columns` 数组定义了表头的属性和标签,通过 `prop` 和 `label` 属性来指定表头的字段和标签名。另外,我们还需要将数据源 `tableData` 传入 `el-table` 组件的 `data` 属性中。
阅读全文