elementui 自定义表头
时间: 2023-07-19 14:41:54 浏览: 70
您可以使用 ElementUI 的 Table 组件来创建带有自定义表头的表格。下面是一个简单的例子:
``` html
<template>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="自定义表头" :render-header="renderHeader"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, customHeader: '自定义表头内容' },
{ name: '李四', age: 20, customHeader: '自定义表头内容' },
{ name: '王五', age: 22, customHeader: '自定义表头内容' }
]
}
},
methods: {
renderHeader(h, { column }) {
return h('div', [
h('span', column.label),
h('span', '(这是自定义表头)')
])
}
}
}
</script>
```
在上面的例子中,我们使用了 `render-header` 属性来渲染自定义表头。这个属性接收一个函数,函数的第一个参数是 `h`,它是一个用于创建 VNode 的函数;第二个参数是一个对象,包含了当前列的信息,包括 `column` 和 `$index` 等。在 `renderHeader` 函数中,我们使用 `h` 函数创建了一个包含两个 `span` 标签的 `div`,第一个 `span` 显示列的 `label`,第二个 `span` 显示自定义表头的内容。
您可以根据需要修改 `renderHeader` 函数来创建自己想要的自定义表头。