成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue樹形菜單

phoenixsky / 1644人閱讀

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

vue樹形菜單

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

js代碼直接調(diào)用api 把請求到的數(shù)據(jù)直接賦值給permissions就可以了，這里不多說。直接說最重要的部分，點擊checkbox 把id傳給后臺 并實現(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;
    })
  }
},

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

點擊菜單添加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);                   
                    };
                });
            });
        },
    },
},

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51975.html

相關(guān)文章

  • vue樹形菜單

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

    BlackHole1 評論0 收藏0

  • VUE+element三級聯(lián)動或樹形菜單獲取最后一項,并加入到表格中

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

    yeyan1996 評論0 收藏0

  • Vue.js-Vue實例

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

    shinezejian 評論0 收藏0

  • java實現(xiàn)構(gòu)造無限層級樹形菜單

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

    seasonley 評論0 收藏0

  • localStorage實現(xiàn)本地儲存樹形菜單

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

    William_Sang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<