当获取后台数据为空时,列表显示默认空图片,不正确姿势:

    <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
14
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 1 年前
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 1 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐