前言
这个需求还挺变态的，下拉功能是下拉功能，全选是全选，要保证全选不影响下拉，下拉不影响全选。
具体布局：
- 下拉框分为复选框和下拉按钮，成为上部（为了方便自己取得上部和下部）
- 下拉框下是子复选框，成为下部
具体功能：
- 在未展开的时候，勾选上部的复选框，实现展开下部的复选框全部选中
- 在展开的时候，实现上部的复选框勾选和取消，下部的复选框相应的全部勾选和全部取消
- 在展开的时候，实现下部的复选框不全勾选，上部的复选框取消勾选，当子级复选框全部勾选的时候，父级复选框勾选
具体效果如下：
1610690791368_154x265.gif
环境
- vant: 2.12.3
- vue: 2.6.11
代码解析：
- 数据结构
一般后端返回的数据只有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: "排球",
},
],
},
],
};
},
- 布局：
在 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（在“功能实现”重点讲）
{{ item.name }}
{{ it.name }}
- 功能实现
- choiceOfFather：全选与取消全选
- choiceOfChildren：选中全部下部复选框，上部复选框选中；下部复选框不全选，上部复选框不选中
- changeArrow：展开或收起下拉框
需要用到数组的几个API，map、every、some，后面会有专门的博客讲解数据API的使用，谢谢观看！！！