vue + iview Table表头中插入图片
开发中遇到一个问题,在表头中需要插入一个公式,不想再引入别的插件所以考虑用图片代替
正常代码中这样引入图片前端可以正常显示:
<img style="width: 100px" src="../../../assets/report.png">
但是在iview 组件的Table表头中插入图片,官方文档没有给出相应的示例,考虑使用renderHeader 函数渲染头部,参考:https://blog.csdn.net/single_cong/article/details/81807834于是有了下面的代码,但是图片死活出不来
columns: [
{
type: 'index',
align: 'center',
title: '序号',
key: 'id',
fixed: 'left',
width: 65,
}, {
slot: 'scoreChange',
minWidth: 200,
renderHeader: (h) => h('div', [
h('span', '哈哈哈哈哈哈'),
h('img', {
attrs: {
src: '../../../assets/report.png'
},
style: {
width: '100px'
}
})
])
}, {
title: 'action',
align: 'center',
slot: 'action',
width: 150,
fixed: 'right'
}
],
于是继续百度发现https://blog.csdn.net/qq_41115965/article/details/80796211修改后完美显示:
{
slot: 'scoreChange',
minWidth: 200,
renderHeader: (h) => h('div', [
h('span', '哈哈哈哈哈哈'),
h('img', {
attrs: {
src: require('../../../assets/report.png')
},
style: {
width: '100px'
}
})
])
}
成功后截图:
事后想想这应该是一个前端最基本的操作,却捣鼓了一天;终究还是自己前端会的太少,需要续断的学习和积累才是硬道理。记录一下自己,以便自己以后复习,写的不好还请多多指教