element-UI級聯選擇器(Cascader)獲取label值 - 代碼篇

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 組成的數組