vue多級復雜列表展開/折疊及全選/分組全選實現
更新時間：2018年11月05日 10:21:33 作者：_TSY_
這篇文章主要介紹了vue多級復雜列表展開/折疊及全選/分組全選實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
首先，來看下效果圖
在線體驗地址：https://hxkj.vip/demo/multipleList/。溫馨提示，打開之后按F12，使用手機模式食用，口味更佳！
可以看出，這個列表有三種展現形式：
1.第一層級中包含直屬子項和第二層級，其中第二層級里包含子項
2.第一層級中只包含第二層級，第二層級里包含子項
3.第一層級中只包含直屬子項
接下來，再分析列表所實現的功能：
1.點擊父級可以展開與折疊該直屬子級；
2.點擊父級級的勾選圖標可以全選或取消該層級下列的所有子項；
3.點擊子項達到該父級的全選狀態(tài)時時，父級的勾選圖標自動勾選；反之，沒達到全選時，父級的勾選圖標自動取消勾選；
4.所有相同層級之間勾選狀態(tài)的改變互不影響；
分析完了，緊接著就到了擼碼時刻了。
1.首先構建我們所需要的數據結構。
data() {
return {
headColor: ['#1c71fb', '#f7aa47', '#00c182', '#ff6769', '#917ee6', '#2cb2eb'],//待選顏色
jobList: [{
"id": "2511",
"name": "嫩江第一中學",
"member": [{
"pid": "12058",
"userName": "冷風",
"job": "安全主任",
"name": "冷風"
}, {
"pid": "12005",
"userName": "周大龍",
"job": "安全主任",
"name": "大龍"
}],
"son": [{
"id": "2513",
"name": "校領導",
"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": "高級架構師",
"name": "文明"
}]
}], //從后臺獲取的人員列表信息
selectPeople: [],//存儲被選擇的人員
isOpenItem: [],//控制每級面板的打開與折疊
isSelectAll: [],//控制每級面板的選中狀態(tài)
}
}
2.初始化數據
初始化數據的主要目的。
1.根據數據來給頭像設置隨機顏色
2.根據數據初始化一層級全選按鈕狀態(tài)
3.根據數據初始化折疊面板折疊狀態(tài)
4.根據數據設置第二層級的選中狀態(tài)
initData() {//數據初始化
//設置頭像背景顏色
let len = this.jobList.length;
for (let i = 0; i < len; i++) {
this.setHeadColor(this.jobList[i].member, this.headColor);
//根據數據初始化全選按鈕狀態(tài)
this.isSelectAll.push([]);
this.$set(this.isSelectAll[i], 'group', false);
this.$set(this.isSelectAll[i], 'child', []);
//根據數據初始化折疊面板折疊狀態(tài)
this.isOpenItem.push([]);
this.$set(this.isOpenItem[i], 'group', false);
this.$set(this.isOpenItem[i], 'child', []);
//設置第二層級的狀態(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)"綁定全選事件，用于改變全選框的全選狀態(tài)
<div class="checkGroup" @click="checkAll(index)" @click.stop>
<i class="iconfont"
:class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].group,'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].group}"></i>
</div>
全選框JS。通過改變this.isSelectAll[index]中的group屬性，來動態(tài)修改父級的選中狀態(tài)。因為子級選項的數據this.selectPeople是由v-model綁定的，所有只需要對其進行增加和刪除的操作，就可以改變子級每一項的選中狀態(tài)
checkAll(index) {//父級的全選操作
this.$set(this.isSelectAll[index], 'group', !this.isSelectAll[index].group);//改變當前按鈕的選中狀態(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)刪除有部門的人員（對應列表第三層級）
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)刪除沒有部門的人員（對應列表第二層級）
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)添加沒有部門的人員（對應列表第二層級）
if (this.selectPeople.includes(this.jobList[index].member[i])) { //如果已經存在，就不用再進行添加
continue;
}
this.selectPeople.push(this.jobList[index].member[i]);
}
for (let i in this.jobList[index].son) {//循環(huán)添加有部門的人員（對應列表第三層級）
for (let j in this.jobList[index].son[i].member) {
if (this.selectPeople.includes(this.jobList[index].son[i].member[j])) { //如果已經存在，就不用再進行添加
continue;
}
this.selectPeople.push(this.jobList[index].son[i].member[j]);
}
}
}
}
4.通過子級改變父級的選中狀態(tài)
子級HTML。需要注意的是，這里面綁定了兩次stateChanged事件，只是參數不同。@click="stateChanged(index, j, k)"代表第二層級的子級。@click="stateChanged(index, i)"代表第一層級的子級。
<ul class="item_second" v-show="isOpenItem[index] && isOpenItem[index].group">
<div class="item_third" v-for="(second,j) in item.son" :key="second.id">
<div @click="checkSecondItem(index, j)" class="item">
<div class="checkGroup" @click="checkSecondAll(index, j)" @click.stop>
<i class="iconfont"
:class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].child[j],'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].child[j]}"></i>
</div>
{{second.name}}
</div>
<ul class="item_fourth" v-show="isOpenItem[index] && isOpenItem[index].child[j]">
<li v-for="(third,k) in second.member" :key="third.pid">
<input @click="stateChanged(index, j, k)" type="checkbox" name="school"
:id="'check'+third.pid"
v-model="selectPeople"
:value="third">
<label class="content-wrap" :for="'check'+third.pid">
<div class="item_img" :style="{ background: third.headColor }">{{ third.name }}</div>
<div class="content">
<p class="content_name">
{{third.userName}}
</p>
<p class="vice">{{ third.job }}</p>
</div>
</label>
</li>
</ul>
</div>
<li v-for="(people,i) in item.member" :key="people.pid">
<input @click="stateChanged(index,i)" type="checkbox" name="school" :id="'check'+people.pid"
v-model="selectPeople"
:value="people">
<label class="content-wrap" :for="'check'+people.pid">
<div class="item_img" :style="{ background: people.headColor }">{{ people.name }}</div>
<div class="content">
<p class="content_name">
{{people.userName}}
</p>
<p class="vice">{{ people.job }}</p>
</div>
</label>
</li>
</ul>
子級JS。其中，stateChanged函數，通過傳入的參數不同來判斷當前屬于哪一層級的數據。setFirstLevelChecked函數，通過判斷所有子級選項的選中狀態(tài)來給第一層級添加選中狀態(tài)。
stateChanged(index, i, j) {
if (j !== undefined) { //如果有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值，第二層級數據
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)添加有部門的人員（對應列表第三層級）
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]) { //如果已經存在，就不用再進行添加
return false
}
}
}
this.$set(this.isSelectAll[index], 'group', true);//改變第一級按鈕的選中狀態(tài)為選中狀態(tài)
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue-router路由跳轉問題 replace，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了在Vant的基礎上封裝下拉日期控件的代碼示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
我們在項目開發(fā)的過程中，經常會遇到這種情況：為data中的某一個對象添加一個屬性，我們該如何解決這個問題呢，下面小編給大家?guī)砹薞ue中this.$set的正確使用，感興趣的朋友跟隨小編一起看看吧2022-12-12
vue中created、watch和computed的執(zhí)行順序詳解
由于vue的雙向數據綁定,自動更新數據的機制,在數據變化后,對此數據依賴?的所有數據,watch事件都會被更新、觸發(fā),下面這篇文章主要給大家介紹了關于vue中created、watch和computed的執(zhí)行順序,需要的朋友可以參考下2022-11-11
vue項目打包為APP,靜態(tài)資源正常顯示,但API請求不到數據的操作
這篇文章主要介紹了vue項目打包為APP,靜態(tài)資源正常顯示,但API請求不到數據的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue項目中經常使用到組件之間的數值傳遞，實現的方法很多，但是原理上基本大同小異。這篇文章將給大家介紹Vue 父子組件數據單向綁定與Vue 父子組件數據雙向綁定的對比從而認識雙向綁定2021-09-09
本文主要探討了 Vue 3 中父子組件之間的通信方式,包括父傳子,通過props傳遞數據和方法；子傳父,用emit觸發(fā)自定義事件并傳遞數據；還介紹了使用ref直接操作子組件實例,借助defineExpose暴露子組件的屬性和方法給父組件,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue 實例事件,結合簡單示例形勢分析了vue.js事件響應與頁面元素相關操作技巧,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了vue3的自定義hook函數使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04