鍍金池/ 問(wèn)答/HTML/ vue如何實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)且多選!且?guī)Щ瑒?dòng)回彈和慣性滑動(dòng)!

vue如何實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)且多選!且?guī)Щ瑒?dòng)回彈和慣性滑動(dòng)!

問(wèn)題描述

公司有個(gè)需求,兩級(jí)地址聯(lián)動(dòng)可多選和三級(jí)分類(lèi)聯(lián)動(dòng)可多選,網(wǎng)上找了很多插件并沒(méi)有滿(mǎn)意的,better-scroll可以解決滑動(dòng)回彈和慣性滑動(dòng),請(qǐng)問(wèn)如何解決多級(jí)聯(lián)動(dòng)和多選問(wèn)題!

以下是UI圖圖片描述

你期待的結(jié)果是什么?實(shí)際看到的錯(cuò)誤信息又是什么?

如果有相關(guān)工具能解決最好,煩請(qǐng)?zhí)峁┫麻_(kāi)發(fā)思路,學(xué)生我剛接觸vue,拜謝各位大佬賜教!
用的是有贊的vant組件庫(kù)

回答
編輯回答
不討囍

思路不難

記住一個(gè)嵌套對(duì)象,看你的描述應(yīng)該是3層

[
    {
        name: '1',
        checked: true,
        children: [
            {
                name: '1-1',
                checked: true,
                children: {
                    name: '1-1-1',
                    checked: true
                }
            }
        ]
    }
]

你要做的事情就是點(diǎn)擊某一級(jí)顯示這一級(jí)下面的children,然后把children里面checked為true的標(biāo)綠,每個(gè)選中/取消選中只要把當(dāng)前這個(gè)child的checked變掉,并且更新父組件選中的數(shù)量即可

至于動(dòng)畫(huà)就簡(jiǎn)單實(shí)用css3 transition就可以了。把隱藏顯示改成left的變化或者寬度的變化

2017年2月5日 17:47
編輯回答
夢(mèng)若殤

看看iview可以否,我記得有多級(jí)聯(lián)動(dòng)

2017年11月12日 08:42