element动态表头

### Element UI 动态生成表格表头 在Element UI中，`el-table-column` 组件用于定义表格列。为了实现动态生成的表头，可以利用 `columns` 数据结构来描述每一列表头的信息，并通过遍历此数据结构来自动生成所需的 `el-table-column`。 对于简单的单层表头，可以直接设置 `prop` 和 `label` 属性[^1]： ```html <template> <div id="app"> <el-table :data="tableData" style="width: 100%"> <!-- 使用v-for循环创建column --> <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop" :label="item.label"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { columns: [ { prop: 'date', label: '日期' }, { prop: 'name', label: '姓名' }, { prop: 'address', label: '地址' } ], tableData: [] }; } }; </script> ``` 当涉及到多级表头时，则需要构建更为复杂的 `columns` 结构以表示层次关系。这通常意味着每个子项可能还会拥有自己的 children 数组，用来存储下一层级的列配置信息[^2]： ```html <template> <div id="app"> <el-table :data="tableData" border style="width: 100%" > <el-table-column v-for="(col,i) of columns" :key="i" :label="col.label"> <template slot-scope="{row}" v-if="!col.children">{{ row[col.prop] }}</template> <el-table-column v-for="(child,j) of col.children" :key="j+i*100" :prop="child.prop" :label="child.label"/> </el-table-column> </el-table> </div> </template> <script> export default { name: "App", data(){ return{ columns:[ { label:'基本信息', children:[{prop:"id",label:"ID"},{prop:"name",label:"名称"}] }, { label:'详情', children:[{prop:"desc",label:"描述"},{prop:"status",label:"状态"}] }], tableData:[/*...*/]} }} </script> ``` 上述代码展示了如何基于给定的数据源动态渲染具有多层次结构的表头。需要注意的是，在实际项目开发过程中，应当根据具体需求调整相应的逻辑处理方式以及样式设计等内容。