vue多級復(fù)雜列表展開/折疊及全選/分組全選實現(xiàn)

更新時間：2018年11月05日 10:21:33 作者：_TSY_

這篇文章主要介紹了vue多級復(fù)雜列表展開/折疊及全選/分組全選實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

首先，來看下效果圖

在線體驗地址：https://hxkj.vip/demo/multipleList/。溫馨提示，打開之后按F12，使用手機模式食用，口味更佳！

可以看出，這個列表有三種展現(xiàn)形式：

1.第一層級中包含直屬子項和第二層級，其中第二層級里包含子項
2.第一層級中只包含第二層級，第二層級里包含子項
3.第一層級中只包含直屬子項

接下來，再分析列表所實現(xiàn)的功能：

1.點擊父級可以展開與折疊該直屬子級；
2.點擊父級級的勾選圖標(biāo)可以全選或取消該層級下列的所有子項；
3.點擊子項達(dá)到該父級的全選狀態(tài)時時，父級的勾選圖標(biāo)自動勾選；反之，沒達(dá)到全選時，父級的勾選圖標(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)

<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)。因為子級選項的數(shù)據(jù)this.selectPeople是由v-model綁定的，所有只需要對其進(jìn)行增加和刪除的操作，就可以改變子級每一項的選中狀態(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)存在，就不用再進(jìn)行添加
        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)存在，就不用再進(jìn)行添加
          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)"代表第一層級的子級。

<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函數(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)存在，就不用再進(jìn)行添加
        return false
      }
    }
  }
  this.$set(this.isSelectAll[index], 'group', true);//改變第一級按鈕的選中狀態(tài)為選中狀態(tài)
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: