1. 程式人生 > 其它 >element-UI級聯選擇器(Cascader)獲取label值 - 程式碼篇

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 組成的陣列