Vue el-table表头上引入组件不能实时传参解决方法分析
更新时间：2022年11月30日 09:33:46 作者：@乐知者@
这篇文章主要介绍了Vue el-table表头上引入组件不能实时传参解决方法，总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路
场景还原
产品要求：点击表格的表头，能触发一个下拉的列表，列表能携带表格的筛选条件，获取相应的数据
写了一个demo，来还原一下bug出现的场景：
<div id="demo">
<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="address"
label="地址"
width="180"
>
<template slot="header">
<city-component
:params="paramsData"
></city-component>
</template>
</el-table-column>
</el-table>
</div>
data: {
tableData: [], // 表格数据
paramsData: {} // 传递给组件的数据
},
methods: {
// 改变paramsData函数
changeParamsDataFn() {
this.paramsData = date.now().getTime();
}
}
在el-table表格的表头中，引入组件 city-component，需要将数据paramsData传递给组件使用。
第一次进入页面时，paramsData第一次被初始化赋值，DOM渲染el-table完成后，是可以正常使用；但若是需要更改paramsData的值，并且同步传递给city-component组件使用时，打印paramsData的值，是可以看到改值的变化，但是组件却无法接受到变化后的paramsData的值
解决方法
（1）给el-table加上一个 :key=tableKeyValue
（2）在改变paramsData后，改变 tableKeyValue的值
<el-table :key="tableKeyValue" > <!-- 其他跟上面一致 --> </el-table>
methods: {
changeParamsDataFn() {
this.tableKeyValue = "city" + date.noe();
}
}
出现原因
这就得先说说，Vue的渲染机制：虚拟DOM+diff算法
- 根据初始DOM生成旧虚拟DOM；所以使用虚拟DOM的缺点之一便是第一次打开页面，需要更多的时间
- 当有了修改数据的操作时，便会生成新的DOM树
- diff算法就会比较新/旧DOM树，找出变更的DOM
- 将改动的DOM，渲染成真实的DOM；有个优点便是，每次变更DOM，不需要从头到尾查询每一个DOM，只需要找出变更的地方就可
因为表格的DOM没有变化，数据改变后，修改后的DOM与原来的DOM一致，无法重新渲染表格。虽然我们能打印出数据的变化，但是无法将数据传入组件。
加上key值，是为了数据改变的同时，改变table的key值，diff算法就能找出前后表格DOM的不同，就能重新渲染表格，重新把值传入组件
似乎也可以将key值，加在引入组件的单元格上，没有真正写过，下次遇到这类问题可以试试
到此这篇关于Vue el-table表头上引入组件不能实时传参解决方法分析的文章就介绍到这了,更多相关Vue el-table引入组件实时传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇浅谈vue的踩坑路。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了vue项目中监听手机物理返回键的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
我们最开始拿到的element-ui是带有下拉箭头的,那么如何去除element-ui下拉框的下拉箭头的实现,本文就详细的介绍一下,感兴趣的可以了解一下2023-08-08
这篇文章主要介绍了使用vue-cli脚手架工具搭建vue-webpack项目，通过几个默认的步骤帮助你快速的构建Vue.js项目。非常具有实用价值，需要的朋友可以参考下2019-01-01
这篇文章主要为大家介绍了Element使用el-table组件二次封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vscode配置vue下的es6规范自动格式化详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要给大家介绍了关于vue实现离线地图+leaflet+高德瓦片的详细代码,Vue Leaflet是一种结合了Vue框架和Leaflet库的前端技术,用于展示和操作天地图,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue绑定设置属性的多种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了vue-router中query取值的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
在本篇文章里小编给各位整理的是关于Vue打包后访问静态资源路径问题相关知识点，需要的朋友们学习下。2019-11-11
最新评论