eltable 表格中加载后台图片的方式

解决prop接受的图片地址,怎么赋给src的问题

  1. 数组
1.数据里加一个空数组,picurl: []
2.后台传过来的图片地址都赋给picurl
	this.picurl=this.tableData.map(item=>{return item.thumbnail})
3.
      <el-table-column label="图片" width="200px" align="center">
        <template slot-scope="scop">
          <el-image class="pic" prop="thumbnail" :src="picurl[scop.$index]" style="width: 100px; height: 100px">
          </el-image>
        </template>
      </el-table-column>
  1. 函数
1.方法里加一个getImg,返回当前项的图片地址
2.
      <el-table-column label="图片" width="200px" align="center">
        <template slot-scope="scop">
          <el-image class="pic" prop="thumbnail" :src="getImg(scop.$index)" style="width: 100px; height: 100px">
          </el-image>
        </template>
      </el-table-column>
  1. 如下,注意prop的值是什么,src的值就是什么
      <el-table-column label="图片" prop="pthumbnail" width="200px" align="center">
        <template slot-scope="scop">
          <el-image class="pic" :src="scop.row.pthumbnail" style="width: 100px; height: 100px">
          </el-image>
        </template>
      </el-table-column>

方法1、2差不多,能加载图片但是是根据表格项地址来加载的,我弄了一个搜索,发现图片不刷新。。搜索数据的第一项的图片永远是所有数据的第一项。换成方法3就没问题了
综上,方法3最好

猜你喜欢

转载自blog.csdn.net/weixin_50624398/article/details/125415465