vue多級複雜列表展開摺疊，全選分組全選實現

首先，來看下效果圖

可以看出，這個列表有三種展現形式：

1.第一層級中包含直屬子項和第二層級，其中第二層級裡包含子項

2.第一層級中只包含第二層級，第二層級裡包含子項

3.第一層級中只包含直屬子項

接下來，再分析列表所實現的功能：

1.點選父級可以展開與摺疊該直屬子級；

2.點選父級級的勾選圖示可以全選或取消該層級下列的所有子項；

3.點選子項達到該父級的全選狀態時時，父級的勾選圖示自動勾選；反之，沒達到全選時，父級的勾選圖示自動取消勾選；

4.所有相同層級之間勾選狀態的改變互不影響；

分析完了，緊接著就到了擼碼時刻了。

1.首先構建我們所需要的資料結構。

data() , ],
"son": [, ]
}]}, , ]
}, , ]
}]}, , ]
}], //從後台獲取的人員列表資訊
selectpeople: ,//儲存被選擇的人員
isopenitem: ,//控制每級面板的開啟與摺疊
isselectall: ,//控制每級面板的選中狀態
}}

2.初始化資料

初始化資料的主要目的。

1.根據資料來給頭像設定隨機顏色

2.根據資料初始化一層級全選按鈕狀態

3.根據資料初始化摺疊面板摺疊狀態

4.根據資料設定第二層級的選中狀態

initdata() 
}}

3.為父級繫結事件

全選框html。使用@click="checkall(index)"繫結全選事件，用於改變全選框的全選狀態

全選框js。通過改變this.isselectall[index]中的group屬性，來動態修改父級的選中狀態。因為子級選項的資料this.selectpeople是由v-model繫結的，所有只需要對其進行增加和刪除的操作，就可以改變子級每一項的選中狀態

checkall(index) 
if (!this.isselectall[index].group) 
for (let i = 0, len = this.selectpeople.length; i < len; i++) 
for (let k in this.joblist[index].son) }}
for (let j in this.joblist[index].member) 
}}	} else 
for (let i in this.joblist[index].member) 
this.selectpeople.push(this.joblist[index].member[i]);
}		for (let i in this.joblist[index].son) 
this.selectpeople.push(this.joblist[index].son[i].member[j]);
}}	}
}

4.通過子級改變父級的選中狀態

子級html。需要注意的是，這裡面繫結了兩次statechanged事件，只是引數不同。@click="statechanged(index, j, k)"代表第二層級的子級。@click="statechanged(index, i)"代表第一層級的子級。

}}
}

子級js。其中，statechanged函式，通過傳入的引數不同來判斷當前屬於哪一層級的資料。setfirstlevelchecked函式，通過判斷所有子級選項的選中狀態來給第一層級新增選中狀態。

statechanged(index, i, j)  else 
}this.$set(this.isselectall[index].child, i, true);//改變父級按鈕的選中狀態為選中狀態
this.setfirstlevelchecked(index, this.joblist[index].son[i].member[j]);//給第一級新增選中狀態
}	} else  else 
}},setfirstlevelchecked(index, data) 
}	for (let i in this.joblist[index].son) 
}	}this.$set(this.isselectall[index], 'group', true);//改變第一級按鈕的選中狀態為選中狀態
}

vue多級複雜列表展開摺疊，全選分組全選實現

IOS 多級列表展開控制項

vue遞迴元件實現多級列表

VUE遞迴樹形實現多級列表

vue多級複雜列表展開 摺疊，全選 分組全選實現

IOS 多級列表展開控制項

vue遞迴元件實現多級列表

VUE遞迴樹形實現多級列表

相關推薦

vue多級複雜列表展開摺疊，全選分組全選實現