element表格数据为空时不想展示暂无数据，可以改成空白*

最新推荐文章于 2023-10-30 12:01:35 发布

原创最新推荐文章于 2023-10-30 12:01:35 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了如何在 Vue 中使用 Element UI 的 el-table 结合 slot 和 v-if 条件语句，当数据为空时优雅地显示占位信息。展示了如何设置样式并处理数据为空时的显示逻辑。

插入部分的代码，用的插槽slot配合v-if
当数据为空时展示

<el-table
          :data="tableData"
          style="width: 100%"
          stripe
          border
          :header-cell-style="{
            color: '#333',
            fontSize: '14px',
            fontWeight: 'bold',
            backgroundColor: '#f4f4f4',
          }"
          :max-height="tableHeight"
          ref="table"
        >
          <div slot="empty" class="color99" style="min-height:80px">
            <div v-if="tableData.length==0">
              <div class="empty-data-view">
                <div>
                  <span class="empty-text">
                    <p class="c-title f-14 fw-400"></p>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <el-table-column prop="CreateTime" min-width="110" label="申请时间" align="left">
            <template slot-scope="scope">
              <span> {{$utils.formatTime(scope.row.CreateTime, "yyyy-MM-dd hh:mm:ss")}} </span>
              <span>  </span>
            </template>
          </el-table-column>