element Cascader組件通過最后一級ID查找匹配的父級ID

最近做項目,把原來的級聯選擇換成了element的 cascader級聯選擇組件,但是由於之前的組件傳值賦值都是使用的選中的這級ID,而element的cascader返回的數據格式是父級ID與選擇的ID一起,不想改動之前的數據格式,所以就自己處理了下數據,傳給后台的數據好處理,只需要拿數組的最后一項值就可以.主要需要處理編輯,查看功能,根據后台返回的最后一級ID展示數據.

把處理的方法寫在公共方法里面

common.js

/**
 * 根據子級類型查找所有匹配的父級類型
 * id: 子級ID
 * data: 匹配數據
 * prop: 匹配的類型,默認用ID匹配
 */
export function getFathersById(id, data, prop = 'id') {
  var arrRes = []
  const rev = (data, nodeId) => {
    for (var i = 0, length = data.length; i < length; i++) {
      const node = data[i]
      if (node[prop] === nodeId) {
        arrRes.unshift(node[prop])
        return true
      } else {
        if (node.children && node.children.length) {
          if (rev(node.children, nodeId)) {
            arrRes.unshift(node[prop])
            return true
          }
        }
      }
    }
    return false
  }
  rev(data, id)
  return arrRes
}

/**

 * 處理傳給后台ID數據,只取最后一級id

 * @param {*} arr 需要處理的數據

 * @param {*} type 1單選 2多選

 */

export function handleId(arr, type) {

  if (type === 1) {

    if (arr.length) {

      return arr[arr.length - 1]

    } else return ''

  } else {

    if (arr.length) {

      const newArr = []

      arr.some(item => {

        newArr.push(item[item.length - 1])

      })

      return newArr

    } else return []

  }

}

頁面中使用

list.vue

<el-cascader
        ref="cascader"
         v-model="initResourceId"
          style="width:100%"
          :options="optionData"
          :show-all-levels="false"
           collapse-tags
           :props="props"
            clearable
           @change="handleChange"
  />
                    
import { getFathersById, handleId } from '@/utils/common'

// 選擇級聯組件
handleChange(value) {
      if (value && value.length) { // 選擇后把下拉框收起
        this.$refs.cascader.dropDownVisible = false
      }
// 把處理好的數據格式賦值給最終要傳給后台的數據
      this.temp.id = handleId(value, 1)

    },

// 點擊修改
update() { // 重新定義一個變量接收組件數據,以免因為數據格式不一致導致報錯
    this.initResourceId = getFathersById(this.temp.id, this.optionData)
}