el-table增加图片

### 在 `el-table` 中增加图片 为了在 `el-table` 组件中增加图片，可以采用多种方法来实现这一需求。一种常见的方式是在表格的数据列定义中直接嵌入 `<img>` 标签，并通过绑定数据源中的 URL 来显示对应的图像。 对于特定场景下需要动态向某个单元格内插入图片的情况，则可以通过自定义渲染函数或作用域插槽完成更复杂的操作[^1]。例如，在合计行展示额外的信息时，利用 `:summary-method="getSummaries"` 属性来自定义汇总逻辑，并在此过程中找到目标 DOM 节点追加所需的 HTML 结构： ```html <template> <div id="app"> <el-table :data="tableData" style="width: 100%" border show-summary :summary-method="getSummaries"> <!-- 定义其他列 --> <el-table-column prop="name" label="名称"></el-table-column> <!-- 含有图片的列 --> <el-table-column prop="imagePath" label="图片"> <template slot-scope="scope"> <img v-if="scope.row.imagePath" :src="scope.row.imagePath" alt="" width="50"/> </template> </el-table-column> <!-- 更多列... --> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '项目A', imagePath: '/path/to/image-a.png' }, { name: '项目B', imagePath: null }, // 如果没有图片则不显示 ... ] }; }, methods: { getSummaries(param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = '总计'; return; } // 对于含有图片的列处理 if(column.property === "imagePath"){ let imgCell = document.querySelector(`.el-table .el-table__footer-wrapper tr th:nth-child(${index + 1})`); setTimeout(() => { var imgElement = document.createElement('IMG'); imgElement.setAttribute("src", "/path/to/total-image.png"); imgElement.style.width = "50px"; imgElement.style.height = "auto"; imgCell.appendChild(imgElement); }); sums[index] = ''; return; } // 处理数值类型的求和或其他计算... }); return sums; } } }; </script> ``` 当遇到样式冲突问题时，比如图片预览功能影响到表格布局，可通过调整 CSS 解决此类兼容性难题[^2]。具体来说就是覆盖默认样式以确保预期效果得以呈现： ```css <style scoped> ::v-deep(.el-table__cell) { position: static !important; } </style> ``` 此外，如果涉及到文件上传并即时预览的功能开发，可借助 FileReader API 将本地选取的照片转换成 Base64 编码字符串用于页面上的快速加载与查看[^3]。