JS+Vue實現(xiàn)三級全選單選
更新時間:2022年07月15日 14:39:40 作者:webqingyou
這篇文章主要為大家詳細(xì)介紹了JS+Vue實現(xiàn)三級全選單選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS+Vue實現(xiàn)三級全選單選的具體代碼,供大家參考,具體內(nèi)容如下
HTML
<div class="demand-class"> <div class="demand-class-title">需求分類</div> <div class="demand-check"> <input class="collect-top-checked" type="checkbox" v-model="demandChecked" @change="handledemandChecked" />全選 </div> <div class="package-type package-type2" v-for="(itns, itds) in classiFications" :key="itns.id" > <div class="package-type-title upgrading-title"> <input class="collect-top-checked" type="checkbox" v-model="ficationsCheck[itds]" @change="handleFicationsCheck(itds)" />{{ itns.name }} <div class="title-bor"></div> </div> <div class="package-type-content"> <div v-for="cd in itns.children" :key="cd.id" class="package-type-list" > <input class="collect-top-checked" type="checkbox" :value="cd.id" @change="handlechildrenCheck(itds, cd.id)" v-model="childrenCheck" /> <div>{{ cd.name }}</div> </div> </div> </div> </div>
js
data () { ? ? classiFications: [], //需求分類 接口給的集合 ? ? demandChecked: false, // 需求分類全選 ? ? ficationsCheck: [], //一級分類的單個全選 ? ? childrenCheck: [], //二級分類的全選 ? ? demandCheckedShow: false, //二級全選不觸發(fā)接口 } ? methods: { ? ? // 需求分類全選 ? ? handledemandChecked() { ? ? ? ?? ? ? ? ? if (this.demandChecked) { ? ? ? ? ? ? this.classiFications.forEach((it, is) => { ? ? ? ? ? ? this.ficationsCheck[is] = true; ? ? ? ? ? ? this.handleFicationsCheck(is); ? ? ? ? ? ? }); ? ? ? ? } else { ? ? ? ? ? ? this.classiFications.forEach((it, is) => { ? ? ? ? ? ? this.ficationsCheck[is] = false; ? ? ? ? ? ? this.handleFicationsCheck(is); ? ? ? ? ? ? }); ? ? ? ? } ? ? ? ? }, ? ? ? ? //一級分類所選 ? ? ? ? async handleFicationsCheck(id) { ? ? ? ?? ? ? ? ? this.demandCheckedShow = true; ? ? ? ? let tmp = this.classiFications[id].childrenIds; //當(dāng)前選擇的id子集合 ? ? ? ? let tmpAdd = this.childrenCheck; //當(dāng)前選擇的id子集合 ? ? ? ? if (this.ficationsCheck[id]) { ? ? ? ? ? ? tmp.forEach((item) => { ? ? ? ? ? ? for (let i = 0; i < tmp.length; i++) { ? ? ? ? ? ? ? ? if (tmpAdd.indexOf(item) === -1) { ? ? ? ? ? ? ? ? this.childrenCheck.push(item); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? }); ? ? ? ? } else { ? ? ? ? ? ? tmp.forEach((item) => { ? ? ? ? ? ? for (let i = 0; i < tmp.length; i++) { ? ? ? ? ? ? ? ? if (tmpAdd.indexOf(item) !== -1) { ? ? ? ? ? ? ? ? this.childrenCheck.splice(this.childrenCheck.indexOf(item), 1); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? }); ? ? ? ? } ? ? ? ? // this.handleType(); ? ? ? ? this.currentPage = 0; ? ? ? ? await this.initSolutionAllPage(); ? ? ? ? this.demandCheckedShow = false; ? ? ? ? }, ? ? ? ? //二級分類所選 ? ? ? ? handlechildrenCheck(ids, cd) { ? ? ?? ? ? ? ? console.log(cd); ? ? ? ? let cont = 0; ? ? ? ? // let conts = 0; ? ? ? ? let tmp = this.classiFications[ids].childrenIds; //當(dāng)前選擇的id子集合 ? ? ? ? let tmpAdd = this.childrenCheck; //當(dāng)前選擇的id子集合 ? ? ? ? if (this.ficationsCheck[ids]) { ? ? ? ? ? ? tmp.forEach((item) => { ? ? ? ? ? ? for (let i = 0; i < tmp.length; i++) { ? ? ? ? ? ? ? ? if (tmpAdd.indexOf(item) === -1) { ? ? ? ? ? ? ? ? this.ficationsCheck[ids] = false; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? }); ? ? ? ? } else { ? ? ? ? ? ? let tmpl = tmp.length === 1 ? 1 : tmp.length - 1; ? ? ? ? ? ? tmp.forEach((item) => { ? ? ? ? ? ? for (let i = 0; i < tmpl; i++) { ? ? ? ? ? ? ? ? if (tmpAdd.indexOf(item) !== -1) { ? ? ? ? ? ? ? ? // console.log(item); ? ? ? ? ? ? ? ? cont = cont + 1; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? }); ? ? ? ? ? ? if (cont === this.classiFications[ids].childrenIds.length) { ? ? ? ? ? ? this.ficationsCheck[ids] = true; ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? // this.handleType(); ? ? ? ? if (!this.demandCheckedShow) { ? ? ? ? ? ? this.currentPage = 0; ? ? ? ? ? ? this.initSolutionAllPage(); ? ? ? ? } ? ? }, }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
區(qū)別JavaScript函數(shù)聲明與變量聲明
這篇文章給大家分享了關(guān)于JavaScript中函數(shù)聲明與變量聲明之間的區(qū)別以及相關(guān)知識點,有興趣的朋友參考下。2018-09-09webpack自動化打包webpack-dev-server的實現(xiàn)
我們每次改完要打包的資源文件,和配置文件都是是輸入npx webpack命令手動打包的,本文就來介紹一下webpack自動化打包webpack-dev-server的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-07-07單行 JS 實現(xiàn)移動端金錢格式的輸入規(guī)則
這篇文章主要介紹了單行 JS 實現(xiàn)移動端金錢格式的輸入規(guī)則,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-05-05Javascript 原型和繼承(Prototypes and Inheritance)
前面我們看到了如何使用 constructor 來初始化對象。如果這樣做,那么每一個創(chuàng)建的新對象都會對那些相同的屬性,方法建立一個獨立的副本。而實際上有更加有效的方法來指定方法,常量,以及其他一些可被所有該類的對象共享的屬性。2009-04-04