前言
這個需求還挺變態(tài)的，下拉功能是下拉功能桅打，全選是全選，要保證全選不影響下拉苏潜，下拉不影響全選。
具體布局：
- 下拉框分為復選框和下拉按鈕变勇，成為上部（為了方便自己取得上部和下部）
- 下拉框下是子復選框恤左，成為下部
具體功能：
- 在未展開的時候，勾選上部的復選框搀绣，實現(xiàn)展開下部的復選框全部選中
- 在展開的時候飞袋，實現(xiàn)上部的復選框勾選和取消，下部的復選框相應的全部勾選和全部取消
- 在展開的時候链患，實現(xiàn)下部的復選框不全勾選巧鸭，上部的復選框取消勾選，當子級復選框全部勾選的時候麻捻，父級復選框勾選
具體效果如下：
1610690791368_154x265.gif
環(huán)境
- vant: 2.12.3
- vue: 2.6.11
代碼解析：
- 數(shù)據(jù)結構
一般后端返回的數(shù)據(jù)只有id（標識）和name（復選框后面該顯示的內容）纲仍，而且一般是兩個接口，一個是上部的數(shù)據(jù)贸毕，一個是下部的數(shù)據(jù)郑叠，這樣的話點擊折疊按鈕的時候，才能取到相應的下部數(shù)據(jù)明棍。
所以從后端拿到數(shù)據(jù)的時候要改造數(shù)據(jù)：
- 父級數(shù)據(jù)中加上all（代表上部復選框的選中狀態(tài)）乡革，isUnfold（代表下拉框是否展開）；
- 子級數(shù)據(jù)中加上checked（代表下部復選框的選中狀態(tài)）
- 父級數(shù)據(jù)加children，將子級改造好的數(shù)據(jù)加到對應父級的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（在“功能實現(xiàn)”重點講）
- 折疊按鈕用父級 isUnfold 屬性，判斷顯示向上的箭頭還是顯示向下的箭頭
- 同時下部的 dom 節(jié)點痕惋，用父級 isUnfold 屬性区宇，判斷展開還是關閉
- 下部 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>
<!--上部結束-->
<!--下部開始-->
<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>
-
功能實現(xiàn)
- choiceOfFather：全選與取消全選
- choiceOfChildren：選中全部下部復選框议谷，上部復選框選中；下部復選框不全選堕虹，上部復選框不選中
- 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>
