Object值放到Array对应的位置-----数据的处理

如何将this.model.dataValueObject的数据对应的放到this.formFields中相应的位置：

1. 使用场景图片

2. 代码详解：

1. 数据展示 a-tree 只有最底层的数据才可以添加值如上图所示：

<a-tree
  v-show="item.columnType === 'CHILD'"
  :tree-data="item.children"
  :replace-fields="{children: 'children',title: 'deptName', key: 'id'}">
  <template #title="item">
    <span v-if="item.children.length >= 0">{{ item.columnComments }}</span>
      <span v-if="item.children.length == 0">：
      <a-input
        v-model="item.columnValue"
        :placeholder="item.columnComments"
       @change="columnValueChange(item)"/>
    </span>
  </template>
</a-tree>

2. 数据mock:

this.model.dataValueObject = {
    "address.addressOne.addressOneOne": "北京市昌平区",
    "name.nameOne": "张xx",
    "old.oldOne.oldOneOne": "18岁",
    "ceshiyijicaidanTwo": "2测试",
    "old.oldTwo": "19岁",
    "id": "2311061006460610005",
    "ceshiyijicaidanOne": "1测试"
}

this.formFields = "result": [
  {
    "id": "10492",
    "tableName": "测试数据11月6日",
    "columnName": "name",
    "columnComments": "姓名",
    "children": [
      {
        "id": "10491",
        "tableName": "测试数据11月6日",
        "columnName": "nameOne",
        "columnComments": "姓名1.1"
        "children": []
      }
    ]
  },
  {
    "id": "10493",
    "tableName": "测试数据11月6日",
    "columnName": "old",
    "columnComments": "年龄"
    "children": [
      {
        "id": "10498",
        "tableName": "测试数据11月6日",
        "columnName": "oldOne",
        "columnComments": "年龄1.1",
        "children": [
          {
            "id": "10497",
            "tableName": "测试数据11月6日",
            "columnName": "oldOneOne",
            "columnComments": "年龄1.1.1",
            "children": []
          }
        ]
      },
      {
        "id": "10499",
        "tableName": "测试数据11月6日",
        "columnName": "oldTwo",
        "columnComments": "年龄1.2",
        "children": []
      }
    ]
  },
  {
    "id": "10494",
    "tableName": "测试数据11月6日",
    "columnName": "address",
    "columnComments": "地址",
    "children": [
      {
        "id": "10501",
        "tableName": "测试数据11月6日",
        "columnName": "addressOne",
        "columnComments": "地址1.1",
        "children": [
          {
            "id": "10500",
            "tableName": "测试数据11月6日",
            "columnName": "addressOneOne",
            "columnComments": "地址1.1.1",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": "10495",
    "tableName": "测试数据11月6日",
    "columnName": "ceshiyijicaidanOne",
    "columnComments": "测试一级菜单1",
    "children": []
  },
  {
    "id": "10496",
    "tableName": "测试数据11月6日",
    "columnName": "ceshiyijicaidanTwo",
    "columnComments": "测试一级菜单2",
    "children": []
  }
]

3. 拿到数据后的处理方法:

1、 将数据传进去
this.dataEditForm(this.formFields)

2、返显数据  处理方法
    dataEditForm(data) {
      data.map((item) => {
        this.processEditData(item)  //传入当前的数据
      })
    },

3、处理第一层主数据
    processEditData (data) {
      this.editValue(data, data.columnName, 0); // 第一层数据每次进入num = 0
    },
  // 递归处理子节点
    editValue(data, parentColumnName, num) {
      let newColumnName =  ''      // 定义变量存储最终的解析
      if(parentColumnName != null) {
        let childColumnName = data.columnName;
        if(num > 0) {     // 第一层数据每次进入num = 0
          newColumnName = parentColumnName + "." + childColumnName ;
        } else {     // 其他子层 num != 0
          newColumnName = childColumnName ;
        }
         // 解析数据   动态添加 - this.$set
          this.$set(data, 'columnValue', this.model.dataValueObject[newColumnName])
      }
      num ++ 
      if(data.children.length) {
        data.children.forEach((i) => {
          this.editValue(i, newColumnName, num);  //递归处理子节点
        })
      }
    },


      // 失去焦点 编辑数据时的值给到列表数据
      columnValueChange(val) {
        this.formFields = this.changeFormFun(this.formFields, val)
      },
      // 填写完成后更新到数组
      changeFormFun(data , val) {
        data.forEach((item) => {
          if(item.id === val.id) { // 当前数据的ID与列表数据ID做匹配
            this.$set(item, 'columnValue', val.columnValue)  // 找到后更新值
          }
          if(item.children.length) {
            this.changeFormFun(item.children, val)  // 递归找到数据更新值
          }
        })
        return data
      },