选中父复选框，并下拉显示子复选框，实现父子选框的全选与非全选

前言

---

这个需求还挺变态的，下拉功能是下拉功能，全选是全选，要保证全选不影响下拉，下拉不影响全选。

具体布局：

1. 下拉框分为复选框和下拉按钮，成为上部（为了方便自己取得上部和下部）
2. 下拉框下是子复选框，成为下部

具体功能：

1. 在未展开的时候，勾选上部的复选框，实现展开下部的复选框全部选中
2. 在展开的时候，实现上部的复选框勾选和取消，下部的复选框相应的全部勾选和全部取消
3. 在展开的时候，实现下部的复选框不全勾选，上部的复选框取消勾选，当子级复选框全部勾选的时候，父级复选框勾选

具体效果如下：

1610690791368_154x265.gif

环境

---

• vant: 2.12.3
• vue: 2.6.11

代码解析：

---

1. 数据结构

一般后端返回的数据只有id（标识）和name（复选框后面该显示的内容），而且一般是两个接口，一个是上部的数据，一个是下部的数据，这样的话点击折叠按钮的时候，才能取到相应的下部数据。
所以从后端拿到数据的时候要改造数据：

• 父级数据中加上all（代表上部复选框的选中状态），isUnfold（代表下拉框是否展开）；
• 子级数据中加上checked（代表下部复选框的选中状态）
• 父级数据加children，将子级改造好的数据加到对应父级的children属性上

改造完结构如下：

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 中，复选框有一种用法是 van-checkbox-group 里套 van-checkbox，这样代表一组复选框，我用的这种方法不适合这种复选框组，所以只用到了 van-checkbox。

• 上部 van-checkbox，v-model 绑定父级的 all 属性，添加一个 click 事件 choiceOfFather（在“功能实现”重点讲）
• 折叠按钮用父级 isUnfold 属性，判断显示向上的箭头还是显示向下的箭头
• 同时下部的 dom 节点，用父级 isUnfold 属性，判断展开还是关闭
• 下部 van-checkbox，v-model 绑定子级的 checked 属性，添加一个 click 事件 choiceOfChildren（在“功能实现”重点讲）

<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>
        <!--上部结束-->
        <!--下部开始-->
      <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>
        <!--下部结束-->
    </div>

3. 功能实现
   • choiceOfFather：全选与取消全选
   • choiceOfChildren：选中全部下部复选框，上部复选框选中；下部复选框不全选，上部复选框不选中
   • changeArrow：展开或收起下拉框

需要用到数组的几个API，map、every、some，后面会有专门的博客讲解数据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>