关于el-table header 插槽踩坑记录

起因是因为我们公司的产品想往这个table 表头上面添加一个筛选的popver

一开始看到这个我还不以为然,不就是往el-table 的header slot加一个popver就可以了么,太简单了。table是根据业务二次封装的,不好直接往上面丢业务代码,所以向父组件暴露一个slot。

加上去之后傻眼🙄了

好像跟想象中的效果不一样?后面思考了很多方向,样式穿透,视图刷新...等,发现都不是这些问题。直到今天网上查询资料才发现,可能是vue2的slot 跟饿了么的el-checkbox存在兼容问题

vue3 的效果是正常的

解决办法

  1. 使用原生的input checkbox 去实现el-checkbox的效果

2. 使用vue3 #slot的写法。

因为vue各个版本的slot语法各不相同,所以这里总结一下

版本 父组件写法(具名插槽) 父组件写法(作用域插槽) 子组件写法
vue2.5更早 <template slot="header"> <template slot="header" slot-scope="scope"> <slot name="header"></slot>
vue2.6+ <template v-slot:header> <template v-slot:header="scope"> <slot name="header"></slot>
vue3 <template #header> <template #header="scope"> <slot name="header"></slot>
相关推荐
腻害兔7 小时前
【若依项目-产品经理视角】深度拆解 RuoYi-Vue-Pro 商城模块:从商品管理到交易引擎,50 张表撑起一整套电商系统
java·大数据·vue.js·产品经理·ai编程
sugar__salt14 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
郝亚军14 小时前
使用Vue 3和Nginx打包和部署Vue.js项目的一般步骤
前端·vue.js·nginx
阿懂在掘金16 小时前
企业级命令式弹窗方案:三行代码适配已有 Dialog
前端·vue.js·前端框架
YWL17 小时前
OpenLayers + Vue 2 使用指南(01)
前端·javascript·vue.js
达子66617 小时前
第8章_HarmonyOs开发图解 剪贴板
vue.js
森林的尽头是阳光19 小时前
tree回显问题
javascript·vue.js·elementui
qetfw20 小时前
MWU:Vue 3 + FastAPI 的 MaaFramework 跨平台 WebUI 源码
前端·vue.js·python·fastapi·开源项目·效率工具
mfxcyh20 小时前
Vue3+Ant Design Vue 实现手动异步文件上传(含大小校验、弹窗上传)
前端·javascript·vue.js
meilindehuzi_a20 小时前
Vue3进阶基础:指令修饰符、v-model表单绑定、动态样式、计算属性与侦听器实战
前端·javascript·vue.js