el-table 表格合并某一列的中相同的行 前几列也根据该列合并

在vue加elementUI结合项目中表格遇到了一个这样的需求:

做表格的时候合并第五列相同的行,但是前四列的合并规则也要和第五列保持一致,即使前五列的所有行都一样也要根据第五列的合并规则

刚开始的时候绞尽脑汁  在做算法的计算 先算第五列  然后前四列根据第五列的去设置  但是总是出错

后来研究了一下合并的这个方法的代码发现   合并取得关键值是prop的值然后根据该值进行合并  那么灵机一动  如果前四列都用第五列的prop值是不是就解决问题了  试了一下果然可以

需要注意的是:渲染机制是根据prop识别唯一标识相当于key值:

所以我优化了一下在创建元素数据的时候  多创建几个自己所需要的prop对应的值:“provinceNameback”  “cityNameback”  给他们赋值为第五列的值即可

el-table 表格合并某一列的中相同的行 前几列也根据该列合并_第1张图片

 

你可能感兴趣的:(工作中遇到的问题,elementui,前端,javascript)