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="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)
}