vue+element el-table 數據格式化 插入html標簽

vue+element 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>