前言：通常地址的選擇都用級聯(lián)選擇器，但v-model綁定的值只有地區(qū)id，因為不是一維數(shù)組屠橄，通過id去反查對應(yīng)的name很麻煩，如果能在@change觸發(fā)事件中就能獲取到相應(yīng)name就再好不過了闰挡。于是小編就去度娘查了一些解決方案锐墙，結(jié)果控制臺竟然報錯，后來發(fā)現(xiàn)是Element版本的問題长酗，記下來分享給大家~
級聯(lián)地址的效果圖
<el-cascader
ref="cascaderAddress"
class="cascader-box"
clearable
v-model="address"
:options="addressOptions"
@change="chgAddress"
:show-all-levels="false"
change-on-select
placeholder="請選擇城市">
</el-cascader>
2.7.0 版本之前
可以用 this.$refs['cascaderAddress'].currentLabels 獲取選中節(jié)點
2.7.0 版本之后
可以用 this.$refs['cascader'].getCheckedNodes() 獲取選中節(jié)點
this.$refs['cascader'].currentLabels 在2.7版本給移除了 可以通過 this.$refs['件名'].getCheckedNodes() 獲取到選中的節(jié)點
chgAddress (value) {
let arr = [];
// let arr = this.$refs['cascaderAddress'].getCheckedNodes()[0].pathLabels;
setTimeout(() => {
arr = this.$refs['cascaderAddress'][0].currentLabels;
});
// 遇到過打印this.$refs['cascaderAddress'][0]中currentLabels值是變化的溪北，
// 但直接打印currentLabels值還是上一次更改的情況，所以加setTimeout處理
console.log(arr);
console.log(value);
},
console截圖
思路：獲取對應(yīng)的NODE節(jié)點，節(jié)點里存儲了相應(yīng)的數(shù)據(jù)信息
感謝文檔 element-ui cascader級聯(lián)選擇器,獲取對象Object
如果你也經(jīng)常使用element-ui 可持續(xù)關(guān)注 Element UI 入坑小結(jié)
如果本文對你有所幫助之拨，感謝點一顆小心心茉继，您的支持是我繼續(xù)創(chuàng)作的動力！
