element ui 表格表头换行
时间: 2023-09-29 12:05:38 浏览: 56
要实现 Element UI 表格表头换行,你可以使用 `scoped slot` 来自定义表头的内容,并在其中使用 HTML 标签来控制换行。
下面是一个示例:
```html
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<div style="white-space: normal;">
{{ scope.row.name }}
</div>
</template>
</el-table-column>
<!-- 其他列... -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三' },
{ name: '李四' },
// 其他数据...
]
};
}
};
</script>
```
在上面的示例中,我们在 `el-table-column` 的 `label` 中直接写上了表头的文本,然后在 `scoped slot` 中使用 `div` 元素,并设置 `white-space: normal;` 来使文本换行显示。
这样就可以实现 Element UI 表格表头换行了。你可以根据自己的需求调整样式或更改其他列的表头。