el-table中插入html標籤

第一反應就是使用element ui 自帶的formatter,但是並不支持返回html標籤

百度和google搜索到的結果要麼有些複雜要麼不能直接用,在學習開源項目小愛admin的時候發現的寫法很好地解決了插入html標籤的問題

通過template標籤+v-if完美解決問題

直接貼代碼

<el-table-column
  prop="ticketPhotoUrl"
  label="車票照片"
  align='center'
  >
    <template slot-scope="scope">
        <div>
            <div v-if="scope.row.ticketPhotoUrl">
                <el-button @click="handleShowTicketPhoto(scope.row)">預覽</el-button>
            </div>
            <div v-if="!scope.row.ticketPhotoUrl">
                <span>無照片</span>
            </div>
        </div>
    </template>
</el-table-column>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章