首页elementui 动态table表头

elementui 动态table表头

时间: 2025-05-09 12:11:51 浏览: 15

### 创建动态 Table 表头在 Vue.js 和 ElementUI 的组合下，`el-table` 组件提供了强大的功能来处理表格数据。为了实现动态表头的效果，可以通过绑定 `columns` 数据到 `el-table-column` 来达到目的。下面是一个简单的例子，展示了如何通过 JavaScript 动态设置表头： ```html <template> <div id="app">  <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :formatter="column.formatter" :render-header="column.renderHeader"> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { // 定义表格的数据源 tableData: [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' } ], // 动态配置的列信息 columns: [ { prop: 'date', label: '日期', formatter(row, column) { return row.date; } }, { prop: 'name', label: '姓名', formatter(row, column) { return row.name; }, renderHeader(h, { column }) { return h('span', {}, ['姓氏:', column.label])} }, { prop: 'address', label: '地址', formatter(row, column) { return row.address; }} ] }; } }; </script> ``` 在这个实例里，`v-for` 指令用于遍历 `columns` 数组中的每一项，并将其作为参数传递给 `<el-table-column>` 标签内的属性。这使得可以根据实际需求轻松调整表头的内容和样式[^1]。对于更复杂的场景，比如想要添加一些交互式的操作按钮或者特殊的渲染逻辑，则可以利用 `render-header` 属性来自定义表头的表现形式[^4]。

阅读全文