element-ui 表格头部添加文字提示 Tips

上图

解决方法

1. 表头添加 :render-header="(h, { column }) => $common.hoverTips(h, { column })"

<el-table-column
    prop="agent_profit_margin"
    align="center"
    width="200"
    :render-header="(h, { column }) => $common.hoverTips(h, { column })"
    label="利润率">
    <template slot-scope="scope">
        <span>{{scope.row.agent_profit_margin *100 + '%'}}</span>
    </template>
</el-table-column>

2. common.js中添加 (注意我这里common在main.js中已经全局注册了的)

const tableHeadTips = {
    '利润率':'去除所有成本后所得利润'
}
export default {
    // 表格头部tips
    hoverTips(h, { column }) {
        const tips = tableHeadTips[column.label];
        return tips ? h("div", [
            h('span', column.label),
            h("el-tooltip",{
                props: {
                    effect: 'dark',
                    content: tips,
                    placement: 'top',
                },
            },
            [   h('i', {
                    class: 'el-icon-question',
                    style: 'color:#749297; margin-left:5px;',
                }),
            ]),
        ]) : h("div", [h('span', column.label)]);
    },
 }

3. 如果有帮助请叫我一声帅哥