PrimeVue dataTable 中的编辑行去除图像标签

【问题标题】：Edit row in PrimeVue dataTable strips image tagPrimeVue dataTable 中的编辑行去除图像标签
【发布时间】：2021-06-05 23:19:10
【问题描述】：

我正在尝试使用 primevue 数据表来完成某些单元格编辑。您只能编辑表格的 3 列。我在 datatable 指令上使用 :rowEditor="true" 来完成能够编辑多个列的操作。问题是，当我点击编辑按钮时，我的图像标签被剥离，只剩下一个 URL。我尝试在其上放置许多标签，例如 :editable="false" 但没有任何效果。有人知道如何在某个列上禁用此功能吗？

primeVue edit documentation

【问题讨论】：

标签： vue.js datatables primevue

【解决方案1】：

更新我找到了解决方法，但我仍然愿意实施更好的解决方案。

<Column field="image_url" header="Image" :editable="false">
    <template #body="{data}">
        <img :src="data.image_url" :alt="data.image_url" class="product-image"/>
    </template>
    <template #editor="slotProps">
        <div v-html="renderHtml(slotProps)"></div>
    </template>
</Column>

renderHtml(data) {
    let src = data.data.image_url,
    alt = data.data.image_url;

    return '<img src="' + src + '" alt="' + alt +'" class="product-image" />';
}

【讨论】：