本人在做vue 新項目時在動態(tài)數(shù)據(jù)渲染的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>

在循環(huán)遍歷的時候?qū)?shù)據(jù)源的字段進行篩選，返回的是進行篩選之后的結(jié)果集

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

自定義結(jié)構(gòu)

        <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> 

這里是所有的結(jié)果集，所以要結(jié)合v-if和v-else使用