前言
这个需求还挺变态的，下拉功能是下拉功能，全选是全选，要保证全选不影响下拉，下拉不影响全选。
具体布局：
- 下拉框分为复选框和下拉按钮，成为上部（为了方便自己取得上部和下部）
- 下拉框下是子复选框，成为下部
具体功能：
- 在未展开的时候，勾选上部的复选框，实现展开下部的复选框全部选中
- 在展开的时候，实现上部的复选框勾选和取消，下部的复选框相应的全部勾选和全部取消
- 在展开的时候，实现下部的复选框不全勾选，上部的复选框取消勾选，当子级复选框全部勾选的时候，父级复选框勾选
具体效果如下：
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（在“功能实现”重点讲）
<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>
-
功能实现
- 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>
