vxe-table插入图片
时间: 2023-12-01 11:43:01 浏览: 403
根据提供的引用内容,vxe-table并没有直接支持插入图片的功能。但是可以通过自定义渲染器来实现在表格中显示图片的效果。以下是一个简单的例子:
```javascript
// 注册一个自定义渲染器
XETable.renderer.add('MyImage', {
// 可编辑激活模板
renderEdit (h, renderOpts, params) {
return [
<input type="text" class="my-image" value={params.row[params.column.property]} onInput={(evnt) => { params.row[params.column.property] = evnt.target.value }} />
]
},
// 可编辑显示模板
renderCell (h, renderOpts, params) {
return [
<img src={params.row[params.column.property]} class="my-image" />
]
}
})
// 在表格中使用自定义渲染器
columns: [
{
title: '图片',
key: 'image',
renderOpts: {
name: 'MyImage'
}
}
],
data: [
{
image: 'https://www.example.com/image.jpg'
}
]
```
在上面的例子中,我们注册了一个名为`MyImage`的自定义渲染器,然后在表格的列定义中使用了这个渲染器。在数据中,我们可以将图片的URL存储在一个字符串类型的字段中,然后在表格中使用这个字段来显示图片。
阅读全文
相关推荐









