nz-tabel 没数据时 显示的暂无数据 不居中
时间: 2024-12-24 10:35:16 浏览: 15
`nz-table` 是 Ant Design Vue 中的一个表格组件,当表中没有数据显示时,如果你想让“暂无数据”这一提示信息不在标题或列之间居中显示,你可以通过自定义样式来自行控制。具体步骤如下:
1. 首先,确保你的 `nz-table` 组件有一个 `nzEmpty` 属性,它会在没有数据时渲染一个空的状态。
```html
<template>
<nz-table :nzEmpty="emptyText" :data="tableData">
<!-- ... -->
</nz-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 初始化为空数组
emptyText: { // 自定义暂无数据文本和样式
title: '暂无数据',
description: '点击加载更多', // 可选,如果没有则默认为空
component: 'div', // 设置为空元素,而不是默认的 span
style: { // 移除默认的居中样式
textAlign: 'left', // 文本左对齐
display: 'flex', // 如果需要调整布局,可以设置此属性
alignItems: 'unset', // 解除默认的居中
},
},
};
},
};
</script>
```
2. 在 CSS 样式中,你可以进一步定制 `emptyText` 的样式,使其不再居中。例如:
```css
.nz-empty .ant-empty-description {
text-align: left;
}
```
这样,当 `tableData` 为空时,“暂无数据”的提示就会按照你设置的样式显示,不会居中。
阅读全文