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

2022-07-26 22:18:15 字數 2474 閱讀 9838

首先,來看下效果圖

可以看出,這個列表有三種展現形式:

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);//改變第一級按鈕的選中狀態為選中狀態

}

IOS 多級列表展開控制項

專案中實現了乙個可以多級展開的列表控制項。每次展開都是互斥的,就是說,展開乙個cell 就會關閉其他展開的層。可以呈現的效果如下圖。第乙個是應用中實現的效果。第二個是demo中的效果。如果有新的需求。會在github 上繼續維護。這個控制項是3層的,就是header 一層。cell一層,opence...

vue遞迴元件實現多級列表

這次我們主要是實現乙個資訊的分類展示列表存在二級 的分類,如下如所示 看到這個很多人會想到這個實現起來很簡單啊,來個巢狀迴圈不就完事了。對,你說的沒錯,事實就是這樣簡單。那麼就先來看看這麼簡單的列表怎麼實現的,然後這個方案的劣勢在 首先看看我們的資料格式 list 基於上面的資料格式,我們的實現方式...

VUE遞迴樹形實現多級列表

簡單來說就是在元件中內使用元件本身。如果出現很多下拉列表,同級,分級資料,層級混雜,可以使用v for的巢狀迴圈不就完事了。對,沒毛病這樣的話也可以做,但是如果資料又多加了 很多 級分類呢 使用v for也能實現,但是 可能會比較雜或混亂!也不適合後期的維護,這個時候呢,我們就可以使用我們所說道的 ...