【Vue + ElementUI】cascader 回顯

 這裏由於服務端入庫需要傳入string(其實是服務端那大哥懶得改,我也懶得費嘴了,不如自己寫來得快)使用cascader級聯選擇器最終選擇的lable,編輯操作回顯寫了一個map方法獲取id 再 Push到array再updata v-model 實現。目前只支持兩級,後期可以寫一個遞歸函數以達到多級處理回顯。cascader v-model只接收一個Array類型才支持回顯

<el-cascader
            v-model="addEditWorkerForm.department"
            :options="departmentTree" :props="addWorkerPositionProps" @change="addWorkerDepartment" :show-all-levels="true">
            <template slot-scope="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
let departmentLable = data.department
        let departmentArray = []
        // cascader 回顯部門處理,只處理兩級,如果多於兩級需要改寫成遞歸函數
        this.departmentTree.map(item => {
          if(item.label == departmentLable){
            departmentArray.push(item.id)
          }else if(item.children && item.children.length > 0){
            for( let i in item.children){
              if(item.children[i].label == departmentLable){
                departmentArray.push(item.children[i].parentId)
                departmentArray.push(item.children[i].id)
              }
            }
          }
        })

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章