el-table 列数据为空自动显示 --
时间: 2024-03-11 13:49:56 浏览: 189
在`el-table`中,如果一列数据为空,会默认不显示,若想强制显示,可以采用以下方法:
1. 使用`show-overflow-tooltip`属性
在`el-table-column`中,设置`show-overflow-tooltip`属性为true,当列数据为空时,会显示一个tooltip,显示每个单元格的值。
```html
<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
```
2. 使用`empty-text`属性
在`el-table-column`中,设置`empty-text`属性,当列数据为空时,会显示指定的文本。
```html
<el-table-column prop="name" label="姓名" empty-text="暂无数据"></el-table-column>
```
3. 使用`v-if`指令
在`el-table-column`中,使用`v-if`指令,判断数据是否为空,若为空则显示指定的文本。
```html
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<span v-if="scope.row.name">{{scope.row.name}}</span>
<span v-else>暂无数据</span>
</template>
</el-table-column>
```
以上三种方法都可以实现在`el-table`中强制显示空数据。
阅读全文