做公司的后臺(tái)管理系統(tǒng)時(shí)苏携，需要一個(gè)省市區(qū)/縣三級聯(lián)動(dòng)選擇的功能贝室，使用到了cascader這個(gè)組件。發(fā)現(xiàn)點(diǎn)過編輯操作之后畸裳，再點(diǎn)擊新增時(shí)選擇省市區(qū)/縣時(shí)缰犁，就會(huì)看到三級聯(lián)動(dòng)里顯示的還是之前選中的值。當(dāng)時(shí)想了很多辦法都不管用怖糊，還去度娘那搜索了很多解決這個(gè)問題的辦法帅容，發(fā)現(xiàn)太難了（那些方法都解決不了我這個(gè)問題（么用））。不過最后看到一個(gè)帖子就解決了伍伤，解決方案如下：
思路：可以采用 重新渲染 的方式解決這個(gè)問題并徘。
1、首先先在cascader中綁定key里
微信截圖_20201228144528.png
2扰魂、其次在data中定義key中綁定的的值
微信截圖_20201228144620.png
3麦乞、最后把重新渲染的代碼寫到你要用到的那個(gè)地方
微信截圖_20201228144638.png
查看我項(xiàng)目中示例代碼：
1蕴茴、html中代碼
<el-col :span="24">
<el-form-item label="所在區(qū)域" prop="region">
<el-cascader
:key="refreshItem"
style="width:320px"
:options="cityData"
v-model="form.region"
placeholder="請選擇省市縣"
@change="changelocation"
/>
</el-form-item>
</el-col>
2、js
import cities from '@/utils/city.json' (此處是我項(xiàng)目中地圖json)
export default {
data() {
return {
// 重新渲染級聯(lián)選擇器
refreshItem: 0,
// 獲取詳細(xì)地址
cityData: [],
}
},
mounted() {
this.cityData = cities
},
methods: {
// 取消 (因?yàn)槲疫@個(gè)項(xiàng)目中的這個(gè)cascader級聯(lián)選擇器是寫在dialog對話框里的姐直，
// 所以我在點(diǎn)擊確定取消時(shí)我就重新渲染了一下倦淀，
// 此處我只寫在了取消事件里，
// 因?yàn)槲业拇_定提交事件里調(diào)用了cancle() )
cancle() {
this.refreshItem++;
}
}
}
