溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關如何在Vue中使用vue-area-linkage實現一個三級聯動效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
1.安裝vue-area-linkage插件：npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose
2.在main.js上進行依賴注入，如下圖所示：
3.在對應vue文件的template模板上寫html標簽，如下圖所示：
4.在對應vue文件的script上進行data默認，如下圖所示：
此時效果已經基本實現，如下圖所示：
注意：該插件有多種聯動效果，我這里做的是省市區街四級聯動，所以 :level='3'。需要其他效果可去網上查詢其他效果代碼，點擊查看。
5.大家可以看到只是出現基本的效果，而樣式看起來很不舒服，這是因為該插件的UI基于Element UI，所以如果需要使用樣式需要依賴Element UI。但是很多情況下設計圖的樣式都是我們自定義的，此時可以自行修改樣式代碼，只需要在文件中寫多一個公共的style文件修改對應的類名樣式來覆蓋之前的樣式代碼即可，需注意這個style文件不可以加上scoped，如下圖紅框所示：
以上就是如何在Vue中使用vue-area-linkage實現一個三級聯動效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
