elemen ui Table表格中添加图片

一、需求

1.在table表格中添加图片
2.图片展示统一大小，默认展示三张图片，超过3张其余隐藏，点击可查看大图
3.无图时展示暂无图片

如图

二、源码

<template><div class="app-container"><el-table :data="listData" border stripe height="600" class="tableBox"><el-table-column type="expand"><template slot-scope="props"><div class="contentBox"><div class="titleBox"><div class="rectangular"></div><div class="text">人员信息</div></div><el-table :data="props.row.dispatchInfoList" border stripe><el-table-column type="index" width="50" align="center" label="序号"></el-table-column><el-table-column label="表头1" align="center" prop="test" show-overflow-tooltip /><el-table-column label="表头2" align="center" prop="test" show-overflow-tooltip /><el-table-column label="最新现场图片" align="center" prop="images" width="170"><template slot-scope="prop"><!-- 拆分图片列表并过滤空值 --><div v-if="prop.row.images" style="display: flex; align-items: center;"><!-- 只显示前3张图片 --><el-image v-for="(img, index) in prop.row.images.split(',').filter(i => i).slice(0, 3)" :key="index"style="width: 50px; height: 50px; margin-right: 5px; cursor: pointer" :src="img":preview-src-list="prop.row.images.split(',').filter(i => i)" fit="cover" lazy><template #error><divstyle="width: 50px; height: 50px; background: #f5f7fa; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999;">缺</div></template></el-image><!-- 超过3张时显示剩余数量 --><div v-if="prop.row.images.split(',').filter(i => i).length > 3"style="width: 50px; height: 50px; background: #f5f7fa; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #666;">+{{prop.row.images.split(',').filter(i => i).length - 3}}</div></div><!-- 无图片时显示占位 --><div v-elsestyle="width: 150px; height: 50px; background: #f5f7fa; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999;"><i class="el-icon-picture-outline" style="margin-right: 5px;"></i>无图片</div></template></el-table-column></el-table></div></template></el-table-column><el-table-column label="表头1" align="center" prop="test" show-overflow-tooltip /><el-table-column label="表头2" align="center" prop="test" show-overflow-tooltip /></el-table></div>
</template><script>
export default {name: 'AlertList',data() {return {// 任务表格数据listData: [{"test": "测试","dispatchInfoList": [{"test": "测试1","images": "https://pic.rmb.bdstatic.com/bjh/01cf57565968e78b239b0eda34e6f3bd5502.jpeg@h_1280,https://sns-webpic-qc.xhscdn.com/202509011558/534f8c33a77056e47b666161ade4b34e/notes_pre_post/1040g3k831kukea78j0205nolaf1g8188joacp88!nd_dft_wlteh_webp_3,https://sns-webpic-qc.xhscdn.com/202509011558/347f4ca62f8cdd7f585e0328b08e9446/notes_pre_post/1040g3k831kukea78j01g5nolaf1g8188fe059lo!nd_dft_wlteh_webp_3,https://sns-webpic-qc.xhscdn.com/202509011558/6e9b3c49daa6bd784def68eaa63bf8cc/notes_pre_post/1040g3k831kukea78j0105nolaf1g8188tbcojdg!nd_dft_wlteh_webp_3,https://sns-webpic-qc.xhscdn.com/202509011558/5d58a6f33329148a1e38f71ca84c91bd/notes_pre_post/1040g3k831kukea78j00g5nolaf1g81880bev4q8!nd_dft_wlteh_webp_3",},{"test": "测试2","images": "",},]}]}},async mounted() {},created() {},methods: {}
}
</script>
<style lang="scss" scoped>//main-container全局样式
.app-container {background: #fff;height: calc(100%);padding: 20px;
}.tableBox {margin-top: 20px;
}.contentBox {width: 100%;height: 100%;padding: 0px 50px;margin-top: 20px;display: flex;flex-direction: column;.titleBox {width: 100%;height: 22px;display: flex;align-items: center;margin-bottom: 5px;.rectangular {height: 14px;width: 4px;background: #eb4b4b;border-radius: 8px;margin-right: 10px;}.text {font-size: 16px;font-weight: 500;}}
}.cardBox {padding: 20px;
}::v-deep .el-drawer__header {align-items: center;color: #72767b;display: flex;margin-bottom: 32px;padding: 20px 20px 0;span {font-size: 16px}
}
</style>