vue樹形菜單

phoenixsky 發布于2019-08-01 18:41 / 1635人閱讀

摘要：樹形菜單由于項目原因，沒有使用框架上的樹形菜單，所以自己動手并參考大佬的代碼寫了一個樹形菜單的組件，話不多說，直接上代碼。

vue樹形菜單

由于項目原因，沒有使用ui框架上的樹形菜單，所以自己動手并參考大佬的代碼寫了一個樹形菜單的組件，話不多說，直接上代碼。
html代碼

js代碼直接調用api 把請求到的數據直接賦值給permissions就可以了，這里不多說。直接說最重要的部分，點擊checkbox 把id傳給后臺并實現全選，反選。

全選，反選

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;
    })
  }
},

通過v-model的數據雙向綁定這一屬性，對對后臺返回的checked這一字段做判斷，當點擊一級菜單checked為true時，把二級菜單的checked也賦值為true 就可以實現全選反選。

點擊菜單添加id給后臺

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);                   
                    };
                });
            });
        },
    },
},

通過監聽permissions的數據變化當checkbox被選中，checked為true時把checkbox所對應的id 推進數組里面存起來，注意的是，一定要在前面把數組清空，這樣可以防止，多次重復點擊所造成的數據重復。
以上所說純屬個人觀點，歡迎大家提出寶貴的建議，如有雷同，請不要懟我。

云服務器 GPU云服務器樹形菜單二級樹形菜單 web樹形菜單 Bootstrap樹形菜單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51975.html

vue樹形菜單

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

BlackHole1 2019-08-22 15:21 評論0 收藏0
VUE+element三級聯動或樹形菜單獲取最后一項,并加入到表格中

摘要：如下圖要實現的功能如下勾選三級聯動的材料勾選最后一級的材料把勾選的材料信息動態添加到下面表格中數據三級聯動數據材料鍵值對選中的材料從后臺獲取三級聯動數據調用封裝的函數把最后一項添加到函數中獲取最后一級材料函數遍歷材料樹如果有下級材料就一直如下圖,要實現的功能如下,勾選三級聯動的材料,勾選最后一級的材料,把勾選的材料信息動態添加到下面表格中showImg(https://segment...

yeyan1996 2019-08-26 10:28 評論0 收藏0
Vue.js-Vue實例

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

shinezejian 2019-08-23 16:03 評論0 收藏0
java實現構造無限層級樹形菜單

摘要：繼續填上篇文章的坑，這里來講一下后臺如何構造多叉樹，這樣前臺就可接收到數據遞歸構造樹形菜單了。繼續填上篇文章的坑，這里來講一下后臺java如何構造多叉樹，這樣前臺就可接收到數據遞歸構造樹形菜單了。我們來理一下如何實現構造多叉樹的邏輯吧，其實整個問題概括起來就是1、構造一個實體類，用來存儲節點，所以我們構造的需要四個對象（id，pid，name，和chirenList）2、構造菜單結...

seasonley 2019-08-15 11:59 評論0 收藏0
localStorage實現本地儲存樹形菜單

摘要：因為任務需要添加到樹的結構上，所以要記錄任務是添加到哪個結點上的，需要為每個樹結點添加一個作為標識以便于在結點上添加任務，樹狀結構中每個結點的按照樹的先序遍歷將結點的依次儲存于數組中。 localStorage實現本地儲存樹形菜單最近在寫一個Todo-list的頁面，頁面布局和操作都寫完后，想要用localStorage實現本地儲存。然而對儲存數據的方法一無所知，就先去了解了web的...

William_Sang 2019-08-21 10:56 評論0 收藏0