最近接到需求把兩個(gè)關(guān)聯(lián)的表格整改成樹形結(jié)構(gòu)圖，如上圖所示。
需要滿足的要求：
1.勾選父級(jí)，子集不勾選。
2.子集顯示默認(rèn)勾選并且禁用。
實(shí)現(xiàn)：
使用以下屬性實(shí)現(xiàn)父與子的不緊密關(guān)聯(lián)
[圖片上傳中...(image.png-76e812-1545370805016-0)]
默認(rèn)勾選使用配合使用 node-key="id"
其中的id可以任意改變，可以換成任意唯一標(biāo)識(shí)即可。
實(shí)現(xiàn)過程中遇到的問題，如何獲取當(dāng)前選中的數(shù)據(jù)
因?yàn)橛羞x項(xiàng)卡的關(guān)系，一開始我的想法是設(shè)置四個(gè)變量用于存放當(dāng)前選取的值，到最后發(fā)現(xiàn)并不需要，因?yàn)槲覀儾僮鞯亩际莟ree他只有一個(gè)data，不同于表格一個(gè)表格是一個(gè)數(shù)據(jù)‘庫’；所以我們只需要設(shè)置一個(gè)變量。
采用el-tree 的 check事件，獲取到當(dāng)前的勾選項(xiàng)
[圖片上傳中...(image.png-c70fb4-1545371649877-0)]
一開始我用了check事件中的第二個(gè)參數(shù) handleCheckChange(item,node)，根據(jù)node. checkedNodes獲取到當(dāng)前所有被選中的，發(fā)現(xiàn)跟我想要的數(shù)據(jù)結(jié)構(gòu)有所出入，各種細(xì)節(jié)再次不再細(xì)說，經(jīng)過一番探討詢問，發(fā)現(xiàn)利用第一個(gè)參數(shù)item即可得到我想要的效果，我們需要做的就是把當(dāng)前選中的數(shù)據(jù)塞到裝載已勾選數(shù)據(jù)的容器中，判斷如果當(dāng)前是勾選狀態(tài)則this.checkedProduct.push(item)；如果我要是取消勾選則判斷當(dāng)前未勾選，則
this.checkedProduct.map((itemChecked,index)=>{
if(item.productNo === itemChecked.productNo){
this.checkedProduct.splice(index,1)
return false;
}
遍歷已經(jīng)勾選的數(shù)據(jù)，如果當(dāng)前取消勾選的數(shù)據(jù)的產(chǎn)品號(hào)與選中的產(chǎn)品號(hào)一致，item.productNo === itemChecked.productNo，則去除數(shù)組中勾選的
this.checkedProduct.splice(index,1)即可實(shí)現(xiàn)。
問題2：實(shí)現(xiàn)父集與子集勾選不關(guān)聯(lián)時(shí)，一開始判斷父級(jí)勾選時(shí)采用的是唯一標(biāo)識(shí)productNo而子集的數(shù)據(jù)中并沒有productNo可用于判斷，那怎么辦呢，我們可以在子集中添加一個(gè)productNo，但此時(shí)并不是把productNo真正的添加到子集中知識(shí)起了一個(gè)別名，在獲取數(shù)據(jù)時(shí)，為子集的唯一標(biāo)識(shí)id起一個(gè)別名叫做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);
})
