elemenui中的el-table表中使用图片el-img

矫情吗；* 2023-10-12 09:04 20阅读 0赞

#### 错误示范： ####

<el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
    	<el-table-column label="商品规格" align="center" prop="productSpecification" width="125">
    	     <div class="demo-image__preview">
    	       <el-image 
    	         style="width: 100px; height: 100px"
    	         :src="productSpecification" >
    	       </el-image>
    	     </div>
    	 </el-table-column>
     </el-table>

el-table-clumn中使用v-bind元素，是不能获取el-table正在进行展示的数据的所以上述代码并不能在单元格内展示图片。  
elementUI显然考虑到了这一点，为我们提供了内置属性slot-scope，  
通过访问其内置的row属性可以访问到表格每一列的变量名。

#### 正确写法： ####

<el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
    	<template slot-scope="scope">
           <div class="demo-image__preview">
             <el-image 
               style="width: 100px; height: 100px"
               :src="scope.row.productSpecification" >
             </el-image>
           </div>
         </template>
    </el-table>

与错误示例的主要区别是给需要用到属性的元素的父元素指定 slot-scope = “scope”，并在 :src 的路径指定通过 scope.row.XX的形式指定

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 android 程序中使用.9图片

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-la

水深无声/ 2023年10月17日 17:33/ 0 赞/ 59 阅读

相关 elemenui中的el-table表中使用图片el-img

错误示范： <el-table v-loading="loading" :data="productList" @selection-change="handle

矫情吗；*/ 2023年10月12日 09:04/ 0 赞/ 21 阅读

相关项目中上传图片使用的图片素材库组件

在components文件中新建一个子组件，文件的所有代码如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

冷不防/ 2023年07月14日 05:55/ 0 赞/ 34 阅读

相关 Bootsrap中的表格、表单、按钮、图片

1.表格为任意 `<table>` 标签添加 `.table` 类普通 ![20200518151500454.png][] <table class=

爱被打了一巴掌/ 2023年02月09日 10:22/ 0 赞/ 39 阅读

相关使用python获取图片中的文字

使用tesseract来识别图片中的文字 windows安装地址：https://digi.bib.uni-mannheim.de/tesseract/ 下载e

旧城等待，/ 2023年01月17日 08:46/ 0 赞/ 172 阅读

相关 VUE3.0学习系列随笔（六）：ElemenUI的安装和使用

VUE3.0学习系列随笔（六）：ElemenUI的安装和使用经过实际测试，VUE2.0版本对应的ElementUI并不适用于VUE3.0，需要将安装版本更换为：Elem

约定不等于承诺〃/ 2023年01月11日 08:49/ 0 赞/ 346 阅读

相关在GitHub中使用图片功能

如何快速借助github使用图片服务？ 1. 在github上的仓库建立一个存放图片的文件夹，文件夹名字随意。如：image 2. 将需要在插入到文本中的图片，push到

野性酷女/ 2022年05月13日 20:08/ 0 赞/ 530 阅读

相关 github的ReadMe.md中如何使用图片

1.上传到项目下上传到项目下，然后记录下需要图片的地址 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

心已赠人/ 2021年12月10日 10:27/ 0 赞/ 372 阅读

相关 ElemenUi简单使用

一、表格行展示 el-table是通过 <el-table :data="tableData" > <el-tabl

电玩女神/ 2021年11月04日 12:48/ 0 赞/ 360 阅读

相关 uni-app 中使用背景图片

看到这个标题的时候，可能有人会问，uni-app 中使用背景图片不是很简单的事情，直接使用 css 就可以了。没错，如果不考虑多端兼容性的问题，使用起来很简单，如下：

朱雀/ 2021年03月23日 10:14/ 0 赞/ 848 阅读