最近寫的項目是vue框架，搭配element-ui框架。這個框架上手快，而且頁面的大部分樣式都有現成的可以用，使用起來比較方便。前幾天有一個需求是要寫省市區聯動選擇，上網搜羅了一遍之后發現了vue-area-linkage這個插件，應該是專門為vue準備的插件，下面開始介紹這個插件的使用方法。

官網介紹的很詳細了，我就不贅述了vue-area-linkage 安裝及使用方法。

插件使用之后的樣子

下面開始介紹遇到的坑以及解決辦法：

1.樣式問題：

這個問題比較好解決，去到依賴包中，查找css文件，找到對應的元素修改樣式即可。因為我的是全局都要修改樣式，所以我直接在依賴包中改。如果不是全局要改的樣式，只是某個頁面需要的樣式就要在自己的css文件里面單獨改，避免全局污染。

修改全局樣式的文件

2.打包時出現 “Module not found: Error: Cant`t resolve 'vue-area-linkage/dist/index.css' in '/app/src/views/devcie'”

在 main.js 中全局注入文件，然后再在文件中注入：

main.js 中注入

文件中注入

3.有需求是新增和編輯，我寫的邏輯是一套代碼，控制顯示隱藏，此為背景。出現的問題是，如果先點擊編輯，會直接顯示接口返回的地址，然后再點擊新增，還會顯示剛剛編輯的地址，即使清除 v-model 綁定的數據也清除不掉顯示的內容（坑）。

下面開始講述我的踩坑之路：

既然一套代碼不行，那就兩套代碼咯。立馬復制粘貼，what f***，這代碼也太多了，而且邏輯還得改，保存還得改，果斷放棄。對自己還得有點要求才行。

那要不新增的時候重置這個置，于是把值置為空，不好使；那要不控制一下 placeholder，不好使；使用jq控制一下 placeholder , 不好使，果斷放棄。

那要不看看源碼。看到了源碼，找到了對應的方法 area_cascader_render , debugger 之后，發現在進入頁面的時候會渲染一下頁面，然后就不會繼續渲染了，不渲染，那值自然就是之前的值。思考了一下，想到如果我在保存或者返回頁面的時候銷毀這個組件，然后在新增的時候不就可以重新渲染了嗎，于是果斷 v-if ，保存返回的時候置為false，新增置為true，完美解決，下班。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。