vue当数据为空时展示elmentui中无数据的样式
时间: 2023-11-22 07:54:15 浏览: 33
可以使用Element UI提供的`el-table`组件中的`slot="empty"`来展示无数据时的样式。具体步骤如下:
1. 在`el-table`组件上添加`:data`属性,将数据绑定到表格中。
```
<el-table :data="tableData">
```
2. 在`el-table`组件上添加`slot="empty"`,在该插槽中添加展示无数据时的样式。
```
<el-table :data="tableData" slot="empty">
<span>No Data</span>
</el-table>
```
完整示例代码如下:
```
<template>
<el-table :data="tableData" stripe>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
<template slot="empty">
<span>No Data</span>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: []
};
}
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)