?當(dāng)表格的綁定數(shù)據(jù)為空時常需要顯示暫無數(shù)據(jù)等字樣，這時候就用到了empty-text

 <el-table
    :data="tableData"
     stripe
    border
    empty-text="暫無數(shù)據(jù)"
 >

但，當(dāng)數(shù)據(jù)為空，想用圖片展示呢，如下圖?

?方法一：可在表格底部列在加入自定義圖片

    <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空狀態(tài)組件，無數(shù)據(jù)圖片占位提示文章來源地址http://www.zghlxwxcb.cn/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>

到了這里，關(guān)于element-ui表格數(shù)據(jù)為空，圖片占位提示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！