element-UI級聯選擇器(Cascader)獲取label值 - 程式碼篇
阿新 • • 發佈:2021-12-27
element-ui級聯選擇器(Cascader)獲取級聯物件 :主要是想獲取:label值、value值
效果圖預覽:
<el-cascader :options="options" v-model="selectedOptions" :props="props" size="small" ref="cascaderAddr" filterable @change="handleChange" change-on-select placeholder="請選擇上級分類"/> <script> handleChange(e,form,thsAreaCode) { // thsAreaCode = this.form.areaCode // 注意1:獲取value值 var thsAreaCode = this.$refs['cascaderAddr'].currentLabels //注意2: 獲取label值 console.log(thsAreaCode); // 注意3: 最終結果是個一維陣列物件 },
</script>
注意:
如上述程式碼:
- 先給級聯選擇器
ref=""
重命一個新元件名為cascaderAddr
- 然後,使用
this.$refs['新元件名'].currentLabels
const checkedNodes = this.$refs['cascaderUnit'].getCheckedNodes()console.log(checkedNodes) // 獲取當前點選的節點console.log(checkedNodes[0].data.label) // 獲取當前點選的節點的labelconsole.log(checkedNodes[0].pathLabels) // 獲取由 label 組成的陣列