image.png
最近接到需求把两个关联的表格整改成树形结构图，如上图所示。
需要满足的要求：
1.勾选父级，子集不勾选。
2.子集显示默认勾选并且禁用。
实现：
使用以下属性实现父与子的不紧密关联
[图片上传中...(image.png-76e812-1545370805016-0)]
默认勾选使用配合使用 node-key="id"
image.png
其中的id可以任意改变，可以换成任意唯一标识即可。
实现过程中遇到的问题，如何获取当前选中的数据
image.png
因为有选项卡的关系，一开始我的想法是设置四个变量用于存放当前选取的值，到最后发现并不需要，因为我们操作的都是tree他只有一个data，不同于表格一个表格是一个数据‘库’；所以我们只需要设置一个变量。
采用el-tree 的 check事件，获取到当前的勾选项
[图片上传中...(image.png-c70fb4-1545371649877-0)]
一开始我用了check事件中的第二个参数 handleCheckChange(item,node)，根据node. checkedNodes获取到当前所有被选中的，发现跟我想要的数据结构有所出入，各种细节再次不再细说，经过一番探讨询问，发现利用第一个参数item即可得到我想要的效果，我们需要做的就是把当前选中的数据塞到装载已勾选数据的容器中，判断如果当前是勾选状态则this.checkedProduct.push(item)；如果我要是取消勾选则判断当前未勾选，则
this.checkedProduct.map((itemChecked,index)=>{
if(item.productNo === itemChecked.productNo){
this.checkedProduct.splice(index,1)
return false;
}
遍历已经勾选的数据，如果当前取消勾选的数据的产品号与选中的产品号一致，item.productNo === itemChecked.productNo，则去除数组中勾选的
this.checkedProduct.splice(index,1)即可实现。
问题2：实现父集与子集勾选不关联时，一开始判断父级勾选时采用的是唯一标识productNo而子集的数据中并没有productNo可用于判断，那怎么办呢，我们可以在子集中添加一个productNo，但此时并不是把productNo真正的添加到子集中知识起了一个别名，在获取数据时，为子集的唯一标识id起一个别名叫做productNo；
res.items.forEach((row, index) => {
row.products.map(item=>{
item.serviceItems.map(serviceItem=>{
serviceItem.disabled = true;
serviceItem.productNo = serviceItem.id;
this.selectionKey.push(serviceItem.id);
})