【vue+element】vue2表格无数据的时候显示图片展示

最新推荐文章于 2023-10-03 21:07:44 发布

晚睡要秃头

最新推荐文章于 2023-10-03 21:07:44 发布

阅读量781

点赞数

分类专栏： Vue 文章标签： vue 前端前端框架

本文链接：https://blog.youkuaiyun.com/qq_44971635/article/details/129670219

版权

Vue 专栏收录该内容

16 篇文章

订阅专栏

这是一个展示未添加商品的空状态图片和一个包含商品信息的表格，表格支持选择和删除操作。商品信息包括商品名称、条码、分类和销售单价。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

放入图片

<span class="good-unadd">未添加商品</span>

</template>

<el-table :data="distUsers" style="width: 100%" @selection-change="handleSelectChange" border ref="multipleTableRef">
    <el-table-column type="selection" width="55" align="center">
    </el-table-column>
    <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
    <el-table-column prop="goodsCode" label="商品条码" align="center"></el-table-column>
    <el-table-column prop="catalogName" label="商品分类" align="center"></el-table-column>
    <el-table-column prop="salePrice" label="销售单价" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
       <template slot-scope="scope"><span class="operation-btn" style="color:#2680EB" @click="delDistTable(scope.row.id)">删除</span></template>
    </el-table-column>
    <template slot="empty">
       <img src="@/assets/images/market/select_empty.png" style="width: 288px; height: 165px"/>
       <span class="good-unadd">未添加商品</span>
    </template>
 </el-table>

2.如图