element table 鼠标移入表头显示tooltip

Question

想要做成这个效果，鼠标移入之后显示
看到文档有这么一个属性render-header，但不是很熟悉这个属性的用法，所以报错，如果有例子更好

Answer 1

h函数第一个参数是标签名，第二个是对象用来设置标签的样式，事件，属性等等，第三个参数是数组，用来设置标签里包含子标签，子标签也可以用h函数渲染

 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>

Answer 2

render-header 这个属性是用了 vue 的 render 函数来创建组件。

语法查看这个： https://cn.vuejs.org/v2/guide...

render-header 查看下面这个例子： http://jsfiddle.net/770tasuc/

Answer 3

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