vue 多层双层全选_vue多级复杂列表展开/折叠及全选/分组全选实现
首先，來看下效果圖
在線體驗地址：https://hxkj.vip/demo/multipleList/。溫馨提示，打開之后按F12，使用手機模式食用，口味更佳！
可以看出，這個列表有三種展現(xiàn)形式：
1.第一層級中包含直屬子項和第二層級，其中第二層級里包含子項
2.第一層級中只包含第二層級，第二層級里包含子項
3.第一層級中只包含直屬子項
接下來，再分析列表所實現(xiàn)的功能：
1.點擊父級可以展開與折疊該直屬子級；
2.點擊父級級的勾選圖標(biāo)可以全選或取消該層級下列的所有子項；
3.點擊子項達到該父級的全選狀態(tài)時時，父級的勾選圖標(biāo)自動勾選；反之，沒達到全選時，父級的勾選圖標(biāo)自動取消勾選；
4.所有相同層級之間勾選狀態(tài)的改變互不影響；
分析完了，緊接著就到了擼碼時刻了。
1.首先構(gòu)建我們所需要的數(shù)據(jù)結(jié)構(gòu)。
data() {
return {
headColor: ['#1c71fb', '#f7aa47', '#00c182', '#ff6769', '#917ee6', '#2cb2eb'],//待選顏色
jobList: [{
"id": "2511",
"name": "嫩江第一中學(xué)",
"member": [{
"pid": "12058",
"userName": "冷風(fēng)",
"job": "安全主任",
"name": "冷風(fēng)"
}, {
"pid": "12005",
"userName": "周大龍",
"job": "安全主任",
"name": "大龍"
}],
"son": [{
"id": "2513",
"name": "校領(lǐng)導(dǎo)",
"member": [{
"pid": "12056",
"userName": "凌凌",
"job": "安全主任",
"name": "凌凌"
}, {
"pid": "12039",
"userName": "唐老師",
"job": "安全主任",
"name": "老師"
}]
}]
}, {
"id": "2510",
"name": "黑龍江黑河市嫩江縣教育局",
"son": [{
"id": "2525",
"name": "辦公室 ",
"member": [{
"pid": "12006",
"userName": "張喵喵",
"job": "安全主任",
"name": "喵喵"
}, {
"pid": "12024",
"userName": "張徳龍",
"job": "老師",
"name": "徳龍"
}]
}, {
"id": "2524",
"name": "局長部",
"member": [{
"pid": "12015",
"userName": "小組長",
"job": "安全主任",
"name": "組長"
}, {
"pid": "12025",
"userName": "TSY",
"job": "11",
"name": "SY"
}]
}]
}, {
"id": "2545",
"name": "城市之星2總部",
"member": [{
"pid": "12076",
"userName": "文明",
"job": "前端開發(fā)工程師",
"name": "文明"
}, {
"pid": "12077",
"userName": "不文明",
"job": "高級架構(gòu)師",
"name": "文明"
}]
}], //從后臺獲取的人員列表信息
selectPeople: [],//存儲被選擇的人員
isOpenItem: [],//控制每級面板的打開與折疊
isSelectAll: [],//控制每級面板的選中狀態(tài)
}
}
2.初始化數(shù)據(jù)
初始化數(shù)據(jù)的主要目的。
1.根據(jù)數(shù)據(jù)來給頭像設(shè)置隨機顏色
2.根據(jù)數(shù)據(jù)初始化一層級全選按鈕狀態(tài)
3.根據(jù)數(shù)據(jù)初始化折疊面板折疊狀態(tài)
4.根據(jù)數(shù)據(jù)設(shè)置第二層級的選中狀態(tài)
initData() {//數(shù)據(jù)初始化
//設(shè)置頭像背景顏色
let len = this.jobList.length;
for (let i = 0; i < len; i++) {
this.setHeadColor(this.jobList[i].member, this.headColor);
//根據(jù)數(shù)據(jù)初始化全選按鈕狀態(tài)
this.isSelectAll.push([]);
this.$set(this.isSelectAll[i], 'group', false);
this.$set(this.isSelectAll[i], 'child', []);
//根據(jù)數(shù)據(jù)初始化折疊面板折疊狀態(tài)
this.isOpenItem.push([]);
this.$set(this.isOpenItem[i], 'group', false);
this.$set(this.isOpenItem[i], 'child', []);
//設(shè)置第二層級的狀態(tài)
for (let j in this.jobList[i].son) {
this.isSelectAll[i].child.push(false)
this.isOpenItem[i].child.push(false)
this.setHeadColor(this.jobList[i].son[j].member, this.headColor);
}
}
}
3.為父級綁定事件
全選框HTML。使用@click="checkAll(index)"綁定全選事件，用于改變?nèi)x框的全選狀態(tài)
:class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].group,'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].group}">
全選框JS。通過改變this.isSelectAll[index]中的group屬性，來動態(tài)修改父級的選中狀態(tài)。因為子級選項的數(shù)據(jù)this.selectPeople是由v-model綁定的，所有只需要對其進行增加和刪除的操作，就可以改變子級每一項的選中狀態(tài)
checkAll(index) {//父級的全選操作
this.$set(this.isSelectAll[index], 'group', !this.isSelectAll[index].group);//改變當(dāng)前按鈕的選中狀態(tài)
if (!this.jobList[index].member && !this.jobList[index].son) {
return
}
if (!this.isSelectAll[index].group) {// 從全選 =》 全不選
for (let key in this.isSelectAll[index].child) { // 移除所有第二層級子項的選中狀態(tài)
this.$set(this.isSelectAll[index].child, key, false);
}
for (let i = 0, len = this.selectPeople.length; i < len; i++) {
if (!this.selectPeople[i]) { //刪除干凈了
return
}
for (let k in this.jobList[index].son) {//循環(huán)刪除有部門的人員(對應(yīng)列表第三層級)
for (let j in this.jobList[index].son[k].member) {
if (this.selectPeople[i] && this.selectPeople[i].pid == this.jobList[index].son[k].member[j].pid) {
this.selectPeople.splice(i, 1);
i--;
break;
}
}
}
for (let j in this.jobList[index].member) {//循環(huán)刪除沒有部門的人員(對應(yīng)列表第二層級)
if (this.selectPeople[i] && this.selectPeople[i].pid == this.jobList[index].member[j].pid) {
this.selectPeople.splice(i, 1);
i--;
break;
}
}
}
} else {// 從全不選 =》 全選
for (let key in this.isSelectAll[index].child) { // 給所有第二層級子項添加選中狀態(tài)
this.$set(this.isSelectAll[index].child, key, true);
}
for (let i in this.jobList[index].member) {//循環(huán)添加沒有部門的人員(對應(yīng)列表第二層級)
if (this.selectPeople.includes(this.jobList[index].member[i])) { //如果已經(jīng)存在，就不用再進行添加
continue;
}
this.selectPeople.push(this.jobList[index].member[i]);
}
for (let i in this.jobList[index].son) {//循環(huán)添加有部門的人員(對應(yīng)列表第三層級)
for (let j in this.jobList[index].son[i].member) {
if (this.selectPeople.includes(this.jobList[index].son[i].member[j])) { //如果已經(jīng)存在，就不用再進行添加
continue;
}
this.selectPeople.push(this.jobList[index].son[i].member[j]);
}
}
}
}
4.通過子級改變父級的選中狀態(tài)
子級HTML。需要注意的是，這里面綁定了兩次stateChanged事件，只是參數(shù)不同。@click="stateChanged(index, j, k)"代表第二層級的子級。@click="stateChanged(index, i)"代表第一層級的子級。
:class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].child[j],'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].child[j]}">
{{second.name}}
:id="'check'+third.pid"
v-model="selectPeople"
:value="third">
{{ third.name }}{{third.userName}}
{{ third.job }}
v-model="selectPeople"
:value="people">
{{ people.name }}{{people.userName}}
{{ people.job }}
子級JS。其中，stateChanged函數(shù)，通過傳入的參數(shù)不同來判斷當(dāng)前屬于哪一層級的數(shù)據(jù)。setFirstLevelChecked函數(shù)，通過判斷所有子級選項的選中狀態(tài)來給第一層級添加選中狀態(tài)。
stateChanged(index, i, j) {
if (j !== undefined) { //如果有j值，代表第三層級數(shù)據(jù)
if (this.selectPeople.includes(this.jobList[index].son[i].member[j])) {//點擊之前為選中狀態(tài)
this.$set(this.isSelectAll[index].child, i, false);//改變父級按鈕的選中狀態(tài)為非選中狀態(tài)
this.$set(this.isSelectAll[index], 'group', false);//改變頂級按鈕的選中狀態(tài)為非選中狀態(tài)
} else {//點擊之前為非選中狀態(tài)
//給父級添加選中狀態(tài)
for (let k = 0; k < this.jobList[index].son[i].member.length; k++) {
if (!this.selectPeople.includes(this.jobList[index].son[i].member[k]) && this.jobList[index].son[i].member[k] != this.jobList[index].son[i].member[j]) {//只要有其中一個未選中，就跳出循環(huán)，不給父級添加選中狀態(tài)
return false
}
}
this.$set(this.isSelectAll[index].child, i, true);//改變父級按鈕的選中狀態(tài)為選中狀態(tài)
this.setFirstLevelChecked(index, this.jobList[index].son[i].member[j]);//給第一級添加選中狀態(tài)
}
} else {//沒有j值，第二層級數(shù)據(jù)
if (this.selectPeople.includes(this.jobList[index].member[i])) {//點擊之前為選中狀態(tài)
this.$set(this.isSelectAll[index], 'group', false);//改變父級按鈕的選中狀態(tài)為非選中狀態(tài)
} else {//點擊之前為非選中狀態(tài)
this.setFirstLevelChecked(index, this.jobList[index].member[i]);//給第一級添加選中狀態(tài)
}
}
},
setFirstLevelChecked(index, data) {//給第一級添加選中狀態(tài)
for (let k in this.jobList[index].member) {
if (!this.selectPeople.includes(this.jobList[index].member[k]) && data != this.jobList[index].member[k]) {//只要有其中一個未選中，就跳出循環(huán)，不給父級添加選中狀態(tài)
return false
}
}
for (let i in this.jobList[index].son) {//循環(huán)添加有部門的人員(對應(yīng)列表第三層級)
for (let j in this.jobList[index].son[i].member) {
if (!this.selectPeople.includes(this.jobList[index].son[i].member[j]) && data != this.jobList[index].son[i].member[j]) { //如果已經(jīng)存在，就不用再進行添加
return false
}
}
}
this.$set(this.isSelectAll[index], 'group', true);//改變第一級按鈕的選中狀態(tài)為選中狀態(tài)
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
總結(jié)
以上是生活随笔為你收集整理的vue 多层双层全选_vue多级复杂列表展开/折叠及全选/分组全选实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 插入顶部_声屏障顶部斜插式安装可获得10
- 下一篇： html如何引入swiper,vue-c