element ui el-table 无数据时显示默认空图片(el-empty)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
当获取后台数据为空时,列表显示默认空图片,不正确姿势:
<el-table
v-loading="isLoading"
:data="deviceListData"
style="width: 100%"
:header-cell-style="headStyle"
row-key="id"
@row-click="handleTabSel"
>
<template v-if="deviceListData.length">
<el-table-column prop="name" label="设备名称"> </el-table-column>
<el-table-column prop="id" label="设备ID"> </el-table-column>
<el-table-column prop="online" label="在线状态"> </el-table-column>
<el-table-column prop="1656121597" label="激活时间"> </el-table-column>
<el-table-column label="操作">
<div class="op-wrapper">
<div @click="editDevice" class="edit">编辑</div>
<div @click="controlDevice" class="edit">控制</div>
<div @click="deleteDevice" class="edit">移除</div>
</div>
</el-table-column>
</template>
<el-empty v-else image-size="60"></el-empty>
</el-table>
发现el-empty 默认空图片一直显示不出来,还以为el-empty用法有问题,弄了个空页面,直接加载el-empty 发现没有问题。查了一下原来el-table 数据为空时,显示默认图片写法不对,正确姿势如下:
<el-table
v-loading="isLoading"
:data="deviceListData"
style="width: 100%"
:header-cell-style="headStyle"
row-key="id"
@row-click="handleTabSel"
>
<el-table-column prop="name" label="设备名称"> </el-table-column>
<el-table-column prop="id" label="设备ID"> </el-table-column>
<el-table-column prop="online" label="在线状态"> </el-table-column>
<el-table-column prop="1656121597" label="激活时间"> </el-table-column>
<el-table-column label="操作">
<div class="op-wrapper">
<div @click="editDevice" class="edit">编辑</div>
<div @click="controlDevice" class="edit">控制</div>
<div @click="deleteDevice" class="edit">移除</div>
</div>
</el-table-column>
<template slot="empty">
<el-empty image-size="60"></el-empty>
</template>
</el-table>
这样就能正常显示el-emtpy 默认空图片了。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)