element table 鼠标移入表头显示tooltip

clipboard.png

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

阅读 16.4k
3 个回答

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>
<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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题