前言

這個需求還挺變態(tài)的，下拉功能是下拉功能，全選是全選，要保證全選不影響下拉，下拉不影響全選。

具體布局：

1. 下拉框分為復(fù)選框和下拉按鈕，成為上部（為了方便自己取得上部和下部）
2. 下拉框下是子復(fù)選框，成為下部

具體功能：

1. 在未展開的時候，勾選上部的復(fù)選框，實現(xiàn)展開下部的復(fù)選框全部選中
2. 在展開的時候，實現(xiàn)上部的復(fù)選框勾選和取消，下部的復(fù)選框相應(yīng)的全部勾選和全部取消
3. 在展開的時候，實現(xiàn)下部的復(fù)選框不全勾選，上部的復(fù)選框取消勾選，當(dāng)子級復(fù)選框全部勾選的時候，父級復(fù)選框勾選

具體效果如下：

1610690791368_154x265.gif

環(huán)境

• vant: 2.12.3
• vue: 2.6.11

代碼解析：

1. 數(shù)據(jù)結(jié)構(gòu)

一般后端返回的數(shù)據(jù)只有id（標(biāo)識）和name（復(fù)選框后面該顯示的內(nèi)容），而且一般是兩個接口，一個是上部的數(shù)據(jù)，一個是下部的數(shù)據(jù)，這樣的話點擊折疊按鈕的時候，才能取到相應(yīng)的下部數(shù)據(jù)。
所以從后端拿到數(shù)據(jù)的時候要改造數(shù)據(jù)：

• 父級數(shù)據(jù)中加上all（代表上部復(fù)選框的選中狀態(tài)），isUnfold（代表下拉框是否展開）；
• 子級數(shù)據(jù)中加上checked（代表下部復(fù)選框的選中狀態(tài)）
• 父級數(shù)據(jù)加children，將子級改造好的數(shù)據(jù)加到對應(yīng)父級的children屬性上

改造完結(jié)構(gòu)如下：

data() {
    return {
      favorite: [
        {
          id: 1,
          name: "體育",
          all: false, // 是否全選
          isUnfold: false, // 是否展開
          children: [
            {
              checked: false, // 是否選中
              id: 2,
              name: "籃球",
            },
            {
              checked: false, // 是否選中
              id: 3,
              name: "足球",
            },
            {
              checked: false, // 是否選中
              id: 4,
              name: "排球",
            },
          ],
        },
        {
          id: 5,
          name: "體育",
          all: false, // 是否全選
          isUnfold: false, // 是否展開
          children: [
            {
              checked: false, // 是否選中
              id: 6,
              name: "籃球",
            },
            {
              checked: false, // 是否選中
              id: 7,
              name: "足球",
            },
            {
              checked: false, // 是否選中
              id: 8,
              name: "排球",
            },
          ],
        },
      ],
    };
  },

2. 布局：

在 vant 中，復(fù)選框有一種用法是 van-checkbox-group 里套 van-checkbox，這樣代表一組復(fù)選框，我用的這種方法不適合這種復(fù)選框組，所以只用到了 van-checkbox。

• 上部 van-checkbox，v-model 綁定父級的 all 屬性，添加一個 click 事件 choiceOfFather（在“功能實現(xiàn)”重點講）
• 折疊按鈕用父級 isUnfold 屬性，判斷顯示向上的箭頭還是顯示向下的箭頭
• 同時下部的 dom 節(jié)點，用父級 isUnfold 屬性，判斷展開還是關(guān)閉
• 下部 van-checkbox，v-model 綁定子級的 checked 屬性，添加一個 click 事件 choiceOfChildren（在“功能實現(xiàn)”重點講）

<div v-for="item in favorite" :key="item.id" class="wapper">
        <!--上部開始-->
      <div class="choice">
        <van-checkbox
          v-model="item.all"
          class="choice_all"
          :name="item.id"
          checked-color="#00C6AB"
          icon-size="16px"
          @click="choiceOfFather(item)"
        >
          {{ item.name }}
        </van-checkbox>
        <div
          @click="changeArrow(item)"
          :class="!item.isUnfold ? 'down-arrow' : 'up-arrow'"
        ></div>
      </div>
        <!--上部結(jié)束-->
        <!--下部開始-->
      <div v-show="item.isUnfold">
        <van-checkbox
          :name="it.id"
          v-for="it in item.children"
          :key="it.id"
          checked-color="#00C6AB"
          icon-size="16px"
          class="choice_item"
          v-model="it.checked"
          @click="choiceOfChildren(item)"
        >
          <span class="choice_name">
            {{ it.name }}
          </span>
        </van-checkbox>
      </div>
        <!--下部結(jié)束-->
    </div>

3. 功能實現(xiàn)
   • choiceOfFather：全選與取消全選
   • choiceOfChildren：選中全部下部復(fù)選框，上部復(fù)選框選中；下部復(fù)選框不全選，上部復(fù)選框不選中
   • changeArrow：展開或收起下拉框

需要用到數(shù)組的幾個API，map、every、some，后面會有專門的博客講解數(shù)據(jù)API的使用，謝謝觀看?。?！

<script>
export default {
  methods: {
    choiceOfFather(item) {
      if (!item.all) {
        item.children.map((_item) => (_item.checked = false));
        return;
      }
      if (item.all) {
        item.children.map((_item) => (_item.checked = true));
        return;
      }
    },
    choiceOfChildren(item) {
      if (item.children.every((_item) => _item.checked === true)) {
        item.all = true;
        return;
      }
      if (item.children.some((_item) => _item.checked === false)) {
        item.all = false;
        return;
      }
    },
    changeArrow(item) {
      item.isUnfold = !item.isUnfold; // 展開顯示
    },
  },
};
</script>