Element table mouse moves into the header to display tooltip

clipboard.png

to achieve this effect,
is displayed after the mouse is moved in. You can see that the document has such an attribute render-header, but is not very familiar with the use of this attribute, so it is better to report an error. It is better if there is an example

.
Mar.13,2021

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>
Menu