vue el-table自定义表头加图标,并显示提示tooltip
render函数中img的src直接加载路径无效,render配置img的src路径方法如下:renderHeader1(h,{column}){return h('span', {}, [h('span', {}, column.label),h('el-tooltip',{ props: { placement: 'top-start', width: '200', trigger: 'hov
·
render函数中img的src直接加载路径无效,render配置img的src路径方法如下:
renderHeader1(h,{column}){
return h('span', {}, [
h('span', {}, column.label),
h('el-tooltip',
{ props: { placement: 'top-start', width: '200', trigger: 'hover', content: '这是提示文本内容。' }},
[
h('img', {
style: {
width: "12px",
height: "12px",
cursor: "pointer",
"margin-left": "6px",
verticalAlign: "middle"
},
attrs: {
src: require('@/assets/images/image.png'),
}
})
])
])
}
或者用class显示
renderHeader2(h,{column}){
return h(
'div', [
h('span', column.label),
h('el-tooltip',
{ props: { placement: 'top-start', width: '200', trigger: 'hover', content: '这是提示文本内容。' }},
[h('i', {
class:'el-icon-question',
style:'color:#ebb563;margin-left:5px;'
})
])
]
);
},
效果如下:
更多推荐
已为社区贡献2条内容
所有评论(0)