在Vue结合ElementUI的项目中，遇到表格第五列相同行需要合并的需求。最初尝试通过算法计算，但遇到错误。后来发现可以通过让前四列使用第五列的prop值实现合并。在创建数据时添加新的prop如provinceNameback和cityNameback，并赋值为第五列的值，成功解决了问题，关键在于渲染机制识别prop作为唯一标识。
在vue加elementUI结合项目中表格遇到了一个这样的需求：
做表格的时候合并第五列相同的行，但是前四列的合并规则也要和第五列保持一致，即使前五列的所有行都一样也要根据第五列的合并规则
刚开始的时候绞尽脑汁 在做算法的计算 先算第五列 然后前四列根据第五列的去设置 但是总是出错
后来研究了一下合并的这个方法的代码发现 合并取得关键值是prop的值然后根据该值进行合并 那么灵机一动 如果前四列都用第五列的prop值是不是就解决问题了 试了一下果然可以
需要注意的是：渲染机制是根据prop识别唯一标识相当于key值：
所以我优化了一下在创建元素数据的时候 多创建几个自己所需要的prop对应的值：“provinceNameback” “cityNameback” 给他们赋值为第五列的值即可
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
