Element 中如何给表头添加提示

艾光远

已于 2025-03-19 21:41:01 修改

阅读量4k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Element 文章标签：前端开发 Vue Element

于 2023-05-12 10:56:05 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/130635864

Element 专栏收录该内容

20 篇文章

订阅专栏

文章介绍了在前端开发中，特别是使用ElementUI时，如何在表格表头实现多行文字的鼠标悬停提示。提供了两种实现方式：1)使用插槽自定义表头，结合el-tooltip组件；2)使用函数渲染自定义表头，通过条件判断控制提示的显示。示例代码详细展示了这两种方法的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，有些地方由于版面不够或是为了进一步说明文字含意，经常会对页面展示的文字进行缩减，然后加一个鼠标悬停提示，以提升用户体验。

上面这种用Element 的组件直接就可以实现，非常容易，但是如果要是在表头添加提示，提示还有多行文字如何实现呢？比如下面这种：

以上这种效果有两种实现方式，以下分别讲解：

1. 使用插槽自定义表头

<el-table-column width="120" >
    <template slot-scope="{}" slot="header">
        <!-- 表头名称 -->
        <span>新增人数</span>
        <el-tooltip class="item" effect="dark" placement="top">
            <i class="el-icon-question" style="font-size:16px;"></i>
            <!-- 悬停提示内容 -->
            <div slot="content">
                <div>新：当日新增粉丝数</div>
                <div>首：新增用户首日付费人数</div>
                <div>累：新增用户到目前累计付费人数</div>
            </div>
        </el-tooltip>
    </template>
    <!-- 表格内容 -->
    <template slot-scope="obj">
        <div>新：{{obj.row.new_fans}}</div>
        <div>首：{{obj.row.first_pay_count}}</div>
        <div>累：{{obj.row.total_pay_count}}</div>
    </template>
</el-table-column>

2. 使用函数渲染自定义表头

关于表头的渲染，在Element 文档中是这样描述的，但关于这个属性的使用却描述的不是很清楚，下面在此做一些简单的描述。

1. 这个属性的值对应的是一个方法，方法实际是渲染函数的调用；

2. 渲染函数第一个参数是标签名称，第二个参数是标签属性，第三个参数是标签内容，由于标签的内容有多个，数据类型是一个数组；

3. 由于有些表头不需要显示提示，可以通过定义一个布尔值的变量来控制；

实现代码如下：

// 表头设置
renderHeader(render,{column, $index }){

    let label = column.label;
    // 只有在指定的表头才显示提示
    let showIcon = false;
    // 每个表头提示显示的内容
    let content = [];
    // 渲染提示方法数组
    let array = [];
    // 表头提示预定义
    let list= [
        ['粉丝：当日新增粉丝数','新增：当日新增小程序用户','首日付费：新增用户首日付费人数','累计付费：新增用户到目前累计付费人数'],
        ['金额：到目前为止新增用户的充值金额','回本：金额 / 投放成本'],
        ['粉丝：投放成本/新增粉丝数','注册：投放成本/新增用户数','粉产：充值金额/新增粉丝数','充产：充值金额/充值人数'],
        ['金额：会员充值的金额','人数：会员充值的人数','首日：成本/首日会员人数','累计：成本/累计会员人数'],
        ['金额：普通充值的金额','人数：普通充值的人数','首日：成本/首日普通充值人数','累计：成本/累计普通充值人数'],
        ['会员：会员人数/总新增人数','充值：普通充值人数/总新增人数','总计：总充值人数/总新增人数'],
        ['充：当日的充值金额 | 前n日的总充值金额','回：前n天的充值总额/投放成本','留：留存率（活跃用户/总新增用户）（当日活跃定义：当日打开小程序的用户）','增：(前n天的充值总额—前n-1天的充值总额)/投放成本','倍：前n天的充值总额/前1天的充值总额']
    ];

    // 通过二维数组循环，定义好表头渲染
    for(let i=0;i<list.length;i++){
        let item = list[i];
        let obj = [];
        for(let k=0;k<item.length;k++){
            obj.push(render('div',{},item[k]));
        };
        array.push(obj);
    };

    switch (label) {
        case '新增人数':
            showIcon = true;
            content = array[0];
            break;
        case '回本率':
            showIcon = true;
            content = array[1];
            break;
        case '获客成本':
            showIcon = true;
            content = array[2];
            break;
        case '会员成本':
            showIcon = true;
            content = array[3];
            break;
        case '充值成本':
            showIcon = true;
            content = array[4];
            break;
        case '转化率':
            showIcon = true;
            content = array[5];
            break;
        case 'D1':
            showIcon = true;
            content = array[6];
            break;
    };
    return [
        label,
        // 第一个参数是标签名称，第二个参数是标签属性，第三个参数是标签内容
        render('el-tooltip',
            {
                props: {
                    content:(function() {
                        return  [
                            render('div',
                                {
                                    class:"tips-box"
                                },
                                // 根据上面的方法显示不同的内容
                                content
                            )
                        ]
                    })(),
                    placement: 'top'
                }
            },
            [
                render(
                    'span',{
                    class: {
                        // 通过变量控制表头是否显示提示
                        'el-icon-question': showIcon
                    }
                })
            ]
        )
    ]

},

在页面中的使用如下：

<el-table-column v-for="item in 60" :label="'D'+`${item}`" width="120" :render-header="renderHeader">
    <template slot-scope="obj">
        <div>充：{{obj.row.drop_list['D'+`${item}`].agent_price}} | {{obj.row.drop_list['D'+`${item}`].price}}</div>
        <div>回：{{obj.row.drop_list['D'+`${item}`].rate}}%</div>
        <div>留：{{obj.row.drop_list['D'+`${item}`].retention}}%</div>
        <div style="color:red">增：{{obj.row.drop_list['D'+`${item}`].increase}}%</div>
        <div style="color:#00f">倍：{{obj.row.drop_list['D'+`${item}`].ratio}}</div>
    </template>
</el-table-column>

上面是一个动态循环渲染表头，本意是想显示第1天到第60天的数据，但只需要在第1天的表头添加提示，所以在上面的渲染函数中通过showIcon这个变量来进行了判断。