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

資訊專欄INFORMATION COLUMN

vue樹形菜單

BlackHole1 / 2131人閱讀

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

vue樹形菜單

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

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

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

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

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

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

相關(guān)文章

  • vue樹形菜單

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

    phoenixsky 評(píng)論0 收藏0

  • VUE+element三級(jí)聯(lián)動(dòng)或樹形菜單獲取最后一項(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ù)遍歷材料樹如果有下級(jí)材料就一直 如下圖,要實(shí)現(xiàn)的功能如下,勾選三級(jí)聯(lián)動(dòng)的材料,勾選最后一級(jí)的材料,把勾選的材料信息動(dòng)態(tài)添加到下面表格中showImg(https://segment...

    yeyan1996 評(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 評(píng)論0 收藏0

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

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

    seasonley 評(píng)論0 收藏0

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

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

    William_Sang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<