递归找到需要的某一项

前言

最近在跟后台对接口时遇到一个这样的问题，后台接口返回的JSON数据格式如下，而我在级联下拉框中选中后需要给后台传targetNumber字段，但是在分组里该字段是空的，不能通过简单的设置defaultprop来实现选中得到的东西。所以我想到了递归搜索返回并写了一个函数来实现他。

{
    "value": "1010",
    "label": "演示对象组",
    "parentid": null,
    "leaf": false,
    "disabled": false,
    "targetNumber": null,
    "children": [
        {
            "value": "27B62743B87E4CCD9592F2F0FC93BFE4",
            "label": "作业人员B",
            "parentid": "1010",
            "leaf": true,
            "disabled": false,
            "targetNumber": "S62178186220125",
            "children": null
        },
        {
            "value": "E30795CD2FA9454CA2394ED4E63423DC",
            "label": "作业人员A",
            "parentid": "1010",
            "leaf": true,
            "disabled": false,
            "targetNumber": "S62178186220111",
            "children": null
        }
    ]
}

代码如下：

<template>
    <el-form :model="addForm" 
      :rules="addRuleForm" 
      ref="addForm" 
      label-width="130px" 
      :inline="true" 
      label-position="right"
      class="worksheetDialog">
        <el-form-item label="下发对象" prop="receivePeople" v-if="!isEdit">
          <el-cascader 
            clearable
            placeholder="输入对象名称搜索"
            v-model="addForm.receivePeople"
            :props="defaultProps"
            :options="peopleOptions"
            show-all-levels
            filterable
            @change="handleChange"  
          ></el-cascader>
        </el-form-item>
    </el-form>
</template>

<script>

export default {
  name: 'dropOrderDialog',
  data () {
    return {
      addForm: {
        receivePeople: [],
        receivenumber: ''
      },
      peopleOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        value: 'value'
      }
    }
  },
  mounted () {
    this.findDownListForTarget()
  },
  methods: {
    // 用户点击级联框选中时触发
    handleChange (value) {
      let _data = value[value.length - 1]
      // 只需要最后一个id
      this.addForm.receivenumber = this.getReceiveNumber(this.peopleOptions, _data)
    },
    getReceiveNumber (data, val) { // 递归遍历获取接受者编号
      let _data = ''
      const fn = (data) => {
        data.forEach((item, index) => {
          if (item.value === val) {
            _data = item.targetNumber
          } else if (item.children && item.children.length > 0) { // 有孩子节点
            fn(item.children, val)
          }
        })
      }
      fn(data)
      return _data
    },
    // 后台返回数据的接口
    findDownListForTarget () {
      Api.findDownListForTarget()       
        .then(res => {
          let datas = res.data
          if (res.status === 0) {   
            this.peopleOptions = this.getChilds(datas)        
          } else {
            this.$message({
              type: 'warning',  
              message: res.message || '请求数据失败'
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
    },
    // 递归
    getChilds (data) {
      if (data) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].children && Array.isArray(data[i].children)) {
            this.getChilds(data[i].children)
          } else {
            delete data[i]['children']
          }
        }
      }  
      return data
    }
  }
}
</script>