本人在做vue 新项目时在动态数据渲染的el-table 中添加图片展示

具体代码

 <el-table-column
        :key="index"
         v-for="(item,index) in maptabletitle.filter(e=>e.item_key!='status'&&e.item_key!='is_sync')"
        :label="item.item_name"
        :prop="item.item_key"
      >
        <template slot-scope="scope">     
          <img :src="scope.row[item.item_key]"  width="127" height="70"  v-if="item.item_key=='image_src'"/>
          <span v-else>{{scope.row[item.item_key]}}</span>
        </template> 
      </el-table-column>

在循环遍历的时候对数据源的字段进行筛选，返回的是进行筛选之后的结果集

maptabletitle.filter(e=>e.item_key!='status'&&e.item_key!='is_sync')

自定义结构

        <template slot-scope="scope">     
          <img :src="scope.row[item.item_key]"  width="127" height="70"  v-if="item.item_key=='image_src'"/>
          <span v-else>{{scope.row[item.item_key]}}</span>
        </template> 

这里是所有的结果集，所以要结合v-if和v-else使用