首頁(yè) 猿問(wèn) el-table-column...

el-table-column 動(dòng)態(tài)生成相關(guān)

Vue.js

墨色風(fēng)雨 2018-08-10 19:02:08

table的表頭由接口返回的數(shù)據(jù)動(dòng)態(tài)生成，列表中需要顯示日期和圖片。時(shí)間戳我在拿到接口數(shù)據(jù)的時(shí)候自己轉(zhuǎn)化為了日期顯示，但是不知道圖片該怎么處理才能顯示出來(lái)。。<el-table class="el-table" :data="dialogList" border fit highlight-current-row> <el-table-column :label="item.label" :key="item.label" :prop="item.prop" v-for="item in labelTitle" align="center"> </el-table-column> </el-table>請(qǐng)教大佬們column中怎么單獨(dú)為某列處理圖片呢？因?yàn)槭莿?dòng)態(tài)生成的，所以不知道怎么給圖片那一列添加<img>標(biāo)簽。

查看完整描述

1 回答

慕田峪9158850

TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊

無(wú)法逃避的一個(gè)事實(shí)是你一定知道是哪一列，無(wú)論是 flag、type、index 或是對(duì)內(nèi)容進(jìn)行識(shí)別。使用 v-if 就好。

<el-table-column :label="item.label" :key="item.label" :prop="item.prop" v-for="item in labelTitle" align="center">
  <template slot-scope="scope">
    <img :src="scope.row[item.prop]" v-if="item.type === 'img'"></img>
    <span v-else>{{scope.row[item.prop]}}</span>
  </template></el-table-column>

反對(duì) 回復(fù) 2018-08-12