本文實(shí)例為大家分享了vue多級(jí)多選菜單組件的制作方法，供大家參考，具體內(nèi)容如下

要開(kāi)發(fā)一個(gè)這樣的多級(jí)多選菜單組件，功能是：

點(diǎn)擊父標(biāo)題欄可以打開(kāi)與折疊子列表
點(diǎn)擊父標(biāo)題欄的勾選圖標(biāo)可以全選或取消子列表
點(diǎn)擊子列表的勾選圖標(biāo)達(dá)到全選時(shí)，父標(biāo)題欄的勾選圖標(biāo)自動(dòng)勾選；反之，沒(méi)達(dá)到全選時(shí)，父標(biāo)題欄的勾選圖標(biāo)自動(dòng)取消勾選
當(dāng)所有父標(biāo)題欄的勾選圖標(biāo)達(dá)到全選時(shí)，最底下那個(gè)全選框自動(dòng)勾選；反之，沒(méi)達(dá)到全選時(shí)，最底下那個(gè)全選框自動(dòng)取消勾選
點(diǎn)擊最底下那個(gè)全選框可以全選或取消全部的勾選圖標(biāo)

所以總結(jié)起來(lái)我們重點(diǎn)要利用子列表勾選了哪些項(xiàng)來(lái)計(jì)算出父標(biāo)題與底下的全選框是自動(dòng)勾選還是自動(dòng)取消，并且父標(biāo)題與底下的全選框在選擇變化時(shí)子列表應(yīng)有什么變化。要做到以上，實(shí)現(xiàn)過(guò)程是：

構(gòu)建我們model層數(shù)據(jù)

datas : [
 {
 //用于判斷是否展示子列表
 isShowListItem : false,
 //用于記錄選中了哪些子項(xiàng)
 selected : [],
 //父標(biāo)題
 listTitle : "保利南悅灣",
 //子列表
 listItem : [
 {
 id : 1,
 name : "李小龍"
 },
 {
 id : 2,
 name : "周星馳"
 },
 {
 id : 3,
 name : "周杰倫"
 }
 ]
 },
 {
 isShowListItem : false,
 selected : [],
 listTitle : "南莊萬(wàn)科城",
 listItem : [
 {
 id : 4,
 name : "大魔王"
 },
 {
 id : 5,
 name : "老妖怪"
 }
 ]
 }
]

記錄子列表勾選了哪些項(xiàng)
子列表通過(guò)v-model=”data.selected”去雙向綁定到selected數(shù)組中，當(dāng)子列表項(xiàng)的checked發(fā)生變化時(shí)，就會(huì)把當(dāng)前項(xiàng)的id記錄到selected數(shù)組里去

<input 
type="checkbox"
:value="item.id"
v-model="data.selected"
>

當(dāng)父標(biāo)題勾選變化時(shí)的處理方法
自動(dòng)處理父標(biāo)題勾選圖標(biāo)的變化
在HTML里，通過(guò)綁定:checked=”isTitleChecked(data)”，這時(shí)，每當(dāng)其他項(xiàng)變化時(shí)，父標(biāo)題都會(huì)調(diào)用一下isTitleChecked這個(gè)方法去判斷一下這時(shí)自己的checked狀態(tài)是true還是false，從而達(dá)到根據(jù)子項(xiàng)選中數(shù)目不同，父標(biāo)題自動(dòng)變化的目的。
通過(guò)@change=”changeTitleChecked(data,$event)”，每當(dāng)父標(biāo)題主動(dòng)勾選或取消時(shí)觸發(fā)
父標(biāo)題HTML

<input :id="data.listTitle"
 class="list-input"
 type="checkbox"
 :checked="isTitleChecked(data)"
 @change="changeTitleChecked(data,$event)"
>

父標(biāo)題JS

changeTitleChecked方法：當(dāng)主動(dòng)觸發(fā)父標(biāo)題的勾選圖標(biāo)時(shí)，如果這次觸發(fā)chaeked的狀態(tài)是true，則要把子列表項(xiàng)中沒(méi)選中的全部選中，即將它們?nèi)考舆M(jìn)selected數(shù)組中；如果是false，則要把子列表項(xiàng)全部取消選中，即清空selected數(shù)組。
isTitleChecked方法：當(dāng)子列表項(xiàng)全部選中時(shí)自動(dòng)勾選父標(biāo)題。

/**
* 當(dāng)父標(biāo)題狀態(tài)變化時(shí)的處理方法
* @param data [當(dāng)前項(xiàng)的data]
* @param event [當(dāng)前項(xiàng)的event]
*/
changeTitleChecked : function (data,event) {
 if (event.target.checked === true) {
 data.listItem.forEach(function (item) {
 data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
 })
 }else {
 data.selected = [];
 }
}

/**
* 判斷父標(biāo)題選擇狀態(tài)
* @param data [當(dāng)前項(xiàng)的data]
* @returns {boolean}
*/
isTitleChecked : function (data) {
 var _selected = data.selected;
 var _listItem = data.listItem;
 // 驗(yàn)證selected中是否含有全部的item的id 如果是 證明title要選中
 return _listItem.every(function (item) {
 return _selected.indexOf(item.id) != -1;
 });
}

當(dāng)?shù)紫碌娜x框變化時(shí)的處理方法
自動(dòng)處理底下的全選框的變化

全選框HTML：

<input id="all-checked"
 type="checkbox"
 :checked="isAllChecked()"
 @change="changeAllChecked($event)"
>

全選框JS：

changeAllChecked方法：當(dāng)主動(dòng)觸發(fā)全選框時(shí)，如果checked為true，則將全部的子項(xiàng)都放進(jìn)selected數(shù)組里；反之則清空全部selected數(shù)組。
isAllChecked 方法：判斷selected數(shù)組的長(zhǎng)度是否等于全部子項(xiàng)數(shù)，如果相等，則全選框checked狀態(tài)設(shè)為true。

/**
* 全選框change事件的回調(diào)處理方法
* @param event 
*/
changeAllChecked : function (event) {
 if (event.target.checked === true) {
 this.datas.forEach(function (data) {
 data.listItem.forEach(function (item) {
 data.selected.indexOf(item.id) === -1 && data.selected.push(item.id);
 })
 })
}else {
 this.datas.forEach(function (data) {
 data.selected = [];
 })
 }
}

/**
* 判斷全選框選擇狀態(tài)
* @returns {boolean}
*/
isAllChecked : function () {
 return this.datas.every(function (data) {
 return data.selected.length === data.listItem.length;
 });
}

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論