iview+vue3-table 自定义表头-给表头加icon加悬浮提醒效果

本文链接：https://blog.csdn.net/m0_45011929/article/details/129600396

文章介绍了如何在Vue中使用view-ui-plus库来实现表格表头的自定义，包括添加图标和悬浮提醒。通过renderHeader方法和Tooltip组件，可以创建带有点击事件和提示信息的表头单元格。

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

table 自定义表头-给表头加icon加悬浮提醒
https://www.codeleading.com/article/76305365520/
https://www.bilibili.com/read/cv17615394

// 基础模板 render是对行自定义，renderHeader是对表头自定义
 render/renderHeader: (h, params) => {
      return h(' 定义的元素 ', { 元素的性质 }, ' 元素的内容' / [元素的内容]);
   }

// 基础格式

// script setup 模式下
import {Icon,Tooltip } from 'view-ui-plus'

{//这是表格表头数据 columns里的其中一个
                title: 'xxx',
				key: 'test表格自定义',
                align: 'center',
                renderHeader: (h, params) => { // Render 函数,自定义列头显示内容
                return h(
                    Tooltip,//标签名如果是普通html 加引号 'div'
                    { //定义标签的样式，事件，熟悉
                        on: {
                            click: () => {
                            // 
                            }
                        } ,
                        // class: 'container',
                        style:{
                            fontweight:'normal',
                        },
                        transfer:true,// 建议添加此属性，它将不受父级样式影响，从而达到更好的效果
                        transferClassName:'',//开启 transfer 时，给浮层添加额外的 class 名称
                        popperClass:'',//给 Poptip 设置 class-name，在使用 transfer 时会很有用
                        placement:'bottom',// Tooltip的属性
                        maxWidth:400,// Tooltip的属性
                        theme:'light',// Tooltip的属性
                        content:'想提示的文字',// Tooltip的属性
                    },
                    ()=>[//内容
                        h('span', 'xxxx'),
                        h(),
                        h(), 
                        //...
                    ],)
                },
            },

// 使用案例
{
                title: 'xxx',
                // key: 'ccgnum',
                slot: 'ccgnum',
                // sortable: true, // 筛选
                align: 'center',
                renderHeader: (h, params) => { // Render 函数,自定义列头显示内容
                return h(
                    Tooltip,
                    { 
                        on: {
                            click: () => {
                            this.allSelected();
                            }
                        } ,
                        // class: 'container',
                        style:{
                            fontweight:'normal',
                        },
                         transfer:true,// 建议添加此属性，它将不受父级样式影响，从而达到更好的效果
                        placement:'bottom',
                        maxWidth:400,
                        theme:'light',
                        content:'提示文字',
                    },
                   ()=> [
                        h('span', 'xxx'),
                        h(Icon, {
                            type:'md-help-circle', 
                            style:{
                                fontSize:'16px',
                                marginLeft:'4px',
                            } 
                            // class:'quest',
                            }, ''),
                        h() //内容
                    ],)
                },
            },

使用上面写法你会发现一个浏览器报了一个错误
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
翻译一下:大致是那样写性能不太好，下面优化一下写法,就是当内容有很多个时使用函数形式
[Vue warn]:默认槽位遇到非函数值。为获得更好的性能，建议使用函数槽。

// 基础模板 render是对行自定义，renderHeader是对表头自定义
 render/renderHeader: (h, params) => {
      return h(' 定义的元素 ', { 元素的性质 }, ' 元素的内容' / ()=>[元素的内容]);
   }