vxe-table内容居中
时间: 2023-10-04 09:08:19 浏览: 482
基于 vxe-table 表格的适配插件,用于兼容 ant-design-vue 组件库
要使vxe-table的内容居中,你可以在表格的header-render和cell-render中使用自定义的渲染器来实现。在渲染器中,你可以使用CSS样式来控制内容的对齐方式。
具体步骤如下:
1. 在vxe-table的表格配置项中,定义header-render和cell-render的函数,可以是全局配置或者是具体某个列的配置。
2. 在header-render和cell-render的函数中,使用div元素包裹内容,并为div元素添加样式类,例如center。
3. 在CSS样式中定义.center样式类,设置text-align属性为center,即可使内容居中显示。
以下是示例代码:
```javascript
// 全局配置
VXETable.setup({
table: {
headerRender ({ column }) {
return (
<div class="center">
{ column.title }
</div>
)
},
cellRender ({ column, row }) {
return (
<div class="center">
{ row[column.property] }
</div>
)
}
}
})
```
```css
.center {
text-align: center;
}
```
阅读全文