<template>
<div id="app">
<el-table :data="tableData" style="width: 100%">
<!-- 静态表头 -->
<el-table-column
:label="姓名"
prop="name"
\></el-table-column>
<!-- 动态表头 -->
<el-table-column
v-for="(column, index) in dynamicColumns"
:key="'dynamic-' + index"
:label="column.label"
:prop="column.prop"
\></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
dynamicColumns: [
{ label: '年龄', prop: 'age' },
{ label: '城市', prop: 'city' },
{ label: '职位', prop: 'position' }
],
tableData: [
{ name: '张三', age: 28, city: '北京', position: '工程师' },
{ name: '李四', age: 22, city: '上海', position: '设计师' },
{ name: '王五', age: 30, city: '广州', position: '产品经理' }
]
};
}
};
</script>
<style scoped>
\#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
}
</style>
element-ui中el-table-column动态表头
最新推荐文章于 2025-06-02 13:15:32 发布