render-header
this property uses the render
function of vue
to create the component.
Syntax check this: ide/render-function.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.
render-header
check out the following example: http://jsfiddle.net/770tasuc/
<el-table-column prop="diffTime" label="" width="120" align="center">
<template slot-scope="scope">
<el-tooltip :content="scope.row.createTime">
<div slot>{{scope.row.diffTime}}</div>
</el-tooltip>
</template>
</el-table-column>
The first parameter of the
h function is the tag signature, the second is the object used to set the style, events, attributes, etc., and the third parameter is the array, which is used to set the tag to contain child tags, which can also be rendered with the h function
.
renderHeader(h, data) {
var column = data.column;//data
var index = data.$index;
var method = () => {
this.clickHandler(index);
};
return h('span', { //
style: {
cursor: 'pointer'//
},
on: {
click: method
}
}, [column.label, h('img', {
style: {
verticalAlign: 'middle',
marginLeft: '5px',
marginTop: '-3px',
width: '12px'
},
domProps: {
src: this.imgurl[index]
}
})]);
}
<span style="cursor: pointer;">//
//column.label
<img src="" style="vertical-align: middle; margin-left: 5px; margin-top: -3px; width:12px;">//
</span>