Element-UI表头Tooltip设置

1,114 阅读1分钟

由于element-ui没有给出设置el-table的表格头icon的方法,如果想给表格头添加icon提示,比如下面这样:

如果想设置成这样,则进行如下步骤即可

1、先在需要设置的列上加上render-header方法

\

<el-table-column prop="skuStock" label="库存" :render-header="renderColumnHeader" width="100"></el-table-column>

\

2、然后实现此方法

\

renderColumnHeader(h, { column }) {
    return h(
        'el-tooltip',
        {
            effect: 'dark',
            placement: 'top-start'
        },
        [
            h('div', {
                slot: 'content'
            }, [
                h('span', {}, '优先取被分配的小库存,如果供货商没有给该分销商分配小库存,则代表共享供货商的所有可用库存。')
            ]),
            h(
                'div',
            [
                h('span', column.label),
                h('i', {
                    class: 'el-icon-question',
                    style: 'color:#606266;margin-left:5px;vertical-align:middle'
                })
            ])
        ]
    );
}

\

最终实现的效果如下图所示:

\