element-ui表格数据为空，图片占位提示-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui表格数据为空，图片占位提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当表格的绑定数据为空时常需要显示暂无数据等字样，这时候就用到了empty-text

 <el-table
    :data="tableData"
     stripe
    border
    empty-text="暂无数据"
 >

但，当数据为空，想用图片展示呢，如下图

element-ui表格数据为空，图片占位提示,vue,前端,ui,vue.js,elementui

方法一：可在表格底部列在加入自定义图片

    <div slot="empty" class="empty">
        <img src="../../assets/images/empty.jpg"/>
        <span class="txt">暂无查不到记录</span>
    </div>

完整代码：

<el-table
    :data="tableData"
    stripe
    border
>
    <el-table-column label="序号" width="70" align="left" prop="NO"></el-table-column>
    <el-table-column label="借款金额" width="130" prop="price">
        <template #default="scope">
            <span class="orange">¥35,666,999,.00</span>
        </template>
    </el-table-column>
    <el-table-column label="操作" width="160" fixed="right" align="center">
        <template #default="scope">
            <el-button size="small" plain type="info" @click="openAddOrEditDialog(scope.row)">还款</el-button>
            <el-button size="small" plain type="success" @click="delData(scope.row.demoId)">订单详情</el-button>
        </template>
    </el-table-column>
    <div slot="empty" class="empty">
        <img src="../../assets/images/empty.jpg"/>
        <span class="txt">暂无查不到记录</span>
    </div>
</el-table>

方法二：使用element的Empty空状态组件，无数据图片占位提示文章来源地址https://www.toymoban.com/news/detail-632464.html

<div slot="empty" class="empty">
    <el-empty description="暂时查不到记录" />
</div>

<el-table
    :data="tableData"
    stripe
    border
>
    <el-table-column label="序号" width="70" align="left" prop="NO"></el-table-column>
    <el-table-column label="借款金额" width="130" prop="price">
        <template #default="scope">
            <span class="orange">¥35,666,999,.00</span>
        </template>
    </el-table-column>
    <el-table-column label="操作" width="160" fixed="right" align="center">
        <template #default="scope">
            <el-button size="small" plain type="info" @click="openAddOrEditDialog(scope.row)">还款</el-button>
            <el-button size="small" plain type="success" @click="delData(scope.row.demoId)">订单详情</el-button>
        </template>
    </el-table-column>
    <div slot="empty" class="empty">
        <el-empty description="暂时查不到记录" />
    </div>
</el-table>

到了这里，关于element-ui表格数据为空，图片占位提示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！