vue樹(shù)形菜單

phoenixsky 發(fā)布于2019-08-01 18:41 / 1721人閱讀

摘要：樹(shù)形菜單由于項(xiàng)目原因，沒(méi)有使用框架上的樹(shù)形菜單，所以自己動(dòng)手并參考大佬的代碼寫了一個(gè)樹(shù)形菜單的組件，話不多說(shuō)，直接上代碼。

vue樹(shù)形菜單

由于項(xiàng)目原因，沒(méi)有使用ui框架上的樹(shù)形菜單，所以自己動(dòng)手并參考大佬的代碼寫了一個(gè)樹(shù)形菜單的組件，話不多說(shuō)，直接上代碼。
html代碼

js代碼直接調(diào)用api 把請(qǐng)求到的數(shù)據(jù)直接賦值給permissions就可以了，這里不多說(shuō)。直接說(shuō)最重要的部分，點(diǎn)擊checkbox 把id傳給后臺(tái) 并實(shí)現(xiàn)全選，反選。

全選，反選

curry(e,node){
  if (e.target.checked) {
    node.subDetail.forEach((sub, i)=>{
      node.subDetail[i].checked =true;
    })
  }else{
    node.subDetail.forEach((sub, i)=>{
      node.subDetail[i].checked =false;
    })
  }
},

通過(guò)v-model的數(shù)據(jù)雙向綁定這一屬性，對(duì)對(duì)后臺(tái)返回的checked這一字段做判斷，當(dāng)點(diǎn)擊一級(jí)菜單checked為true時(shí)，把二級(jí)菜單的checked也賦值為true 就可以實(shí)現(xiàn)全選反選。

點(diǎn)擊菜單添加id給后臺(tái)

watch:{
  permissions: {
        deep: true,
        immediate: true,
        handler(val) {
            this.form.cPermissionIds = [];
            this.form.cDetailIds = [];
            val.forEach(menu => {
                if (menu.checked) {
                    this.form.cPermissionIds.push(menu.cPermissionId);
                };
                menu.subDetail.forEach(sub => {
                    if (sub.checked) {
                        this.form.cDetailIds.push(sub.cDetailId);                   
                    };
                });
            });
        },
    },
},

通過(guò)監(jiān)聽(tīng)permissions的數(shù)據(jù)變化當(dāng)checkbox被選中，checked為true時(shí)把checkbox所對(duì)應(yīng)的id 推進(jìn)數(shù)組里面存起來(lái)，注意的是，一定要在前面把數(shù)組清空，這樣可以防止，多次重復(fù)點(diǎn)擊所造成的數(shù)據(jù)重復(fù)。
以上所說(shuō)純屬個(gè)人觀點(diǎn)，歡迎大家提出寶貴的建議，如有雷同，請(qǐng)不要懟我。

GPU云服務(wù)器云服務(wù)器樹(shù)形菜單二級(jí)樹(shù)形菜單 web樹(shù)形菜單 Bootstrap樹(shù)形菜單

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/51975.html

相關(guān)文章

vue樹(shù)形菜單

摘要：樹(shù)形菜單由于項(xiàng)目原因，沒(méi)有使用框架上的樹(shù)形菜單，所以自己動(dòng)手并參考大佬的代碼寫了一個(gè)樹(shù)形菜單的組件，話不多說(shuō)，直接上代碼。 vue樹(shù)形菜單由于項(xiàng)目原因，沒(méi)有使用ui框架上的樹(shù)形菜單，所以自己動(dòng)手并參考大佬的代碼寫了一個(gè)樹(shù)形菜單的組件，話不多說(shuō)，直接上代碼。html代碼showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

BlackHole1 2019-08-22 15:21 評(píng)論0 收藏0
VUE+element三級(jí)聯(lián)動(dòng)或樹(shù)形菜單獲取最后一項(xiàng),并加入到表格中

摘要：如下圖要實(shí)現(xiàn)的功能如下勾選三級(jí)聯(lián)動(dòng)的材料勾選最后一級(jí)的材料把勾選的材料信息動(dòng)態(tài)添加到下面表格中數(shù)據(jù)三級(jí)聯(lián)動(dòng)數(shù)據(jù)材料鍵值對(duì)選中的材料從后臺(tái)獲取三級(jí)聯(lián)動(dòng)數(shù)據(jù)調(diào)用封裝的函數(shù)把最后一項(xiàng)添加到函數(shù)中獲取最后一級(jí)材料函數(shù)遍歷材料樹(shù)如果有下級(jí)材料就一直如下圖,要實(shí)現(xiàn)的功能如下,勾選三級(jí)聯(lián)動(dòng)的材料,勾選最后一級(jí)的材料,把勾選的材料信息動(dòng)態(tài)添加到下面表格中showImg(https://segment...

yeyan1996 2019-08-26 10:28 評(píng)論0 收藏0
Vue.js-Vue實(shí)例

摘要：推薦閱讀原文學(xué)習(xí)筆記實(shí)例實(shí)例組件間通信組件間通信組件間通信用戶信息表圖書電商數(shù)據(jù)圖書電商數(shù)據(jù)圖書電商數(shù)據(jù)渲染微信精選數(shù)據(jù)渲染微信精選數(shù)據(jù)渲染微信推薦閱讀原文學(xué)習(xí)筆記：Vue實(shí)例 Vue實(shí)例組件間通信 See the Pen 組件間通信 by whjin (@whjin) on CodePen. 圖書電商數(shù)據(jù) See the Pen 圖書電商數(shù)據(jù) by whjin (@whji...

shinezejian 2019-08-23 16:03 評(píng)論0 收藏0
java實(shí)現(xiàn)構(gòu)造無(wú)限層級(jí)樹(shù)形菜單

摘要：繼續(xù)填上篇文章的坑，這里來(lái)講一下后臺(tái)如何構(gòu)造多叉樹(shù)，這樣前臺(tái)就可接收到數(shù)據(jù)遞歸構(gòu)造樹(shù)形菜單了。繼續(xù)填上篇文章的坑，這里來(lái)講一下后臺(tái)java如何構(gòu)造多叉樹(shù)，這樣前臺(tái)就可接收到數(shù)據(jù)遞歸構(gòu)造樹(shù)形菜單了。我們來(lái)理一下如何實(shí)現(xiàn)構(gòu)造多叉樹(shù)的邏輯吧，其實(shí)整個(gè)問(wèn)題概括起來(lái)就是1、構(gòu)造一個(gè)實(shí)體類，用來(lái)存儲(chǔ)節(jié)點(diǎn)，所以我們構(gòu)造的需要四個(gè)對(duì)象（id，pid，name，和chirenList）2、構(gòu)造菜單結(jié)...

seasonley 2019-08-15 11:59 評(píng)論0 收藏0
localStorage實(shí)現(xiàn)本地儲(chǔ)存樹(shù)形菜單

摘要：因?yàn)槿蝿?wù)需要添加到樹(shù)的結(jié)構(gòu)上，所以要記錄任務(wù)是添加到哪個(gè)結(jié)點(diǎn)上的，需要為每個(gè)樹(shù)結(jié)點(diǎn)添加一個(gè)作為標(biāo)識(shí)以便于在結(jié)點(diǎn)上添加任務(wù)，樹(shù)狀結(jié)構(gòu)中每個(gè)結(jié)點(diǎn)的按照樹(shù)的先序遍歷將結(jié)點(diǎn)的依次儲(chǔ)存于數(shù)組中。 localStorage實(shí)現(xiàn)本地儲(chǔ)存樹(shù)形菜單最近在寫一個(gè)Todo-list的頁(yè)面，頁(yè)面布局和操作都寫完后，想要用localStorage實(shí)現(xiàn)本地儲(chǔ)存。然而對(duì)儲(chǔ)存數(shù)據(jù)的方法一無(wú)所知，就先去了解了web的...

William_Sang 2019-08-21 10:56 評(píng)論0 收藏0