element-plus 表格的empty 怎么使用
时间: 2023-07-22 21:16:58 浏览: 85
在`Element Plus`中,表格(`el-table`)组件的 `empty` 属性可以用来自定义没有数据时的提示内容。你可以在 `el-table` 组件上添加 `:empty-text` 或 `:empty` 属性来设置自定义的提示内容。
例如,你可以这样使用:
```html
<el-table :data="tableData" :empty-text="'暂无数据'">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
在这个例子中,如果 `tableData` 数据为空,那么表格将会显示 `暂无数据` 的提示信息。你也可以使用插槽来自定义 `empty` 的提示内容,如下所示:
```html
<el-table :data="tableData">
<template v-slot:empty>
<div class="no-data">
<span>暂无数据</span>
<el-button type="primary">添加数据</el-button>
</div>
</template>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
在这个例子中,如果 `tableData` 数据为空,那么表格将会显示插槽内容中的内容,包括一个提示信息和一个按钮。你可以根据自己的需求进行自定义。
相关推荐
![tgz](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)