Elementui中table组件暂无数据样式在屏幕中间
时间: 2024-03-08 17:49:28 浏览: 69
VUE + elementui-table组件 在table-cell单元格中绘制微型echarts图
是的,ElementUI中的Table组件提供了一个 `show-empty` 属性,可以设置当没有数据时是否显示表头和表尾。如果您想要在没有数据时显示一个居中的提示信息,可以使用一个自定义的插槽 `empty`,并在其中添加一个提示信息。以下是一个示例代码:
```html
<template>
<el-table :data="tableData" :show-header="true" :show-empty="false">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<template slot="empty">
<div style="text-align:center;padding:20px;">
<span>暂无数据</span>
</div>
</template>
</el-table>
</template>
```
在上面的示例中,`empty` 插槽中的内容将在没有数据时显示在表格中间。您可以根据需要调整样式和提示信息。
阅读全文