前言
最近开发用到了element UI tree组件,没想到会踩到一个大坑。
文档提到的这个方法可以获取到选中了的选项id,令人震惊的是返回的数组id居然将父级(通常是某个分类)及二级children id合并在一起,也就是说如果我要知道一个选中的二级选项所在的父级分类id,根据这个方法是根本做不到的。这个设计到底是怎么想的???
然后就是网上查找解决办法,有看到修改源码的神操作,还有结合下面这个方法
完成的,但是做不到我要的。
后端需要前端传递选中的数组,单个选项数据格式是这样的:
{
goodsid: '126',
cateid: '1',
goodsName: '语文课',
cateName: '小学',
}
前端页面长这样:
解决方案
经过一番探索了之后发现解决问题的其实是这个方法:
这个方法能够获取到所有选中的选项对象,那我只要在构造数据的时候,将每个选项对象绑定上它所在的分类id跟名字就行了。
代码如下:
获取数据后,构造出数据结构(我这边数据结构只有两层):
调用getCheckedNodes方法,打印如下: