iview table组件 自定义表头

在实际项目开发中,我们经常会用到各种各样的表格,比如在表格表头中填加按钮,下拉菜单,图标等等,在网上搜了一段时间发现比较少,所以写好之后就想着分享出来给有需要的人参考参考,例如下面这种表头带图标的:


image.png

可能也会有人觉得通过iview的render函数就是添加,但是这只是想对了一半,对于iview表格组件的tbody部分确实是可以通过render函数来进行修改,但是仅仅是针对tbody部分,对于表头则是通过renderheader进行一个修改,具体代码如下

复制代码
          {
              // title: '当月优质率',
              key: 'key7',
              renderHeader: (h, params)=>{
                return h('div',[
                  h('strong', '当月优质率'),
                  h('Icon',{
                    props: {
                      type: 'ios-help-circle-outline',
                    },
                    style: {
                      marginLeft: '5px',
                      fontSize: '16px',
                      cursor: 'pointer'
                    }
                  }),
                ])
              }
          },

最后编辑于:2025-04-21 11:06:54
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
Uranus^1 小时前
Spring Boot与Kafka集成实践:实现高效消息队列
spring boot·kafka·消息队列·分布式系统
小张快跑。1 小时前
【Vue3】(二)vue3语法详解:自定义泛型、生命周期、Hooks、路由
前端·vue.js·typescript
Name:PLC2 小时前
vue3中使用watch
前端·javascript·vue.js
啥都想学的又啥都不会的研究生2 小时前
log日志最佳实践
java·spring boot·后端·spring·junit·log4j·logback
qq_12498707532 小时前
基于Spring boot+vue的中医养生系统的设计与实现(源码+论文+部署+安装+调试+售后)
java·vue.js·spring boot·后端·毕业设计
海盐泡泡龟3 小时前
大文件上传如何做断点续传?(分别使用vue、React、java)
java·vue.js·react.js
武昌库里写JAVA3 小时前
Vue3响应式数据: 深入分析Ref与Reactive
java·vue.js·spring boot·学习·课程设计
biubiubiu07063 小时前
SpringBoot中消息转换器的选择
java·spring boot·spring
bing_1584 小时前
Spring Boot 项目中常用的 ORM 框架 (JPA/Hibernate) 在性能方面有哪些需要注意的点?
数据库·spring boot·hibernate