基于简易树形组件初始版-数据处理的思考

基于简易树形组件初始版-数据处理的思考

​ 树组件给出的数据格式是这样的：

const defaultData = {
  children:[
    {
      "title":"组织1",
      "key": "0-1",
      "children":[
        {
          "title":"部门1",
          "key":"0-1-1",
          "children": [
            {
              title: '2018年9月10号校招啦啦啦',
              key : '0-1-1-0',
              checked: false,
              children: [],
            }
          ],
          "collapsed": true,
          "checked": false,
        },
        {
          "title":"部门1.5",
          "key":"0-1-2",
          "children": [
            {
              title: '2018年9月10号校招啦啦啦',
              key : '0-1-2-0',
              checked: false,
              children: [],
            }
          ],
          "collapsed": true,
          "checked": false,
        },
      ],
      "collapsed": true,
      "checked": true,
    },
    {
      "title":"组织2",
      "key": "0-2",
      "children":[
        {
          "title":"部门2",
          "key":"0-2-1",
          "children": [
            {
              title: '2018年和外和发发和发挥',
              key : '0-2-1-0',
              checked: false,
              children: [],
            }
          ],
          "collapsed": true,
          "checked": false,
        },
      ],
      "collapsed": true,
      "checked": true,
    }
  ],
  key: "root"
}

​ 这个数据格式操作起来比较复杂，操作树组件的时候每次更新都需要更新全部数据，想把它变成对象包含所有key的形式数组，操作时这些数据只做展示，而不做处理（选中、折叠的逻辑由单独的数据State来处理）

​ 变更数据为如下所示:

{
  root: [
    { title: '组织1', key: '0-1', parentKey: [Array] },
    { title: '组织2', key: '0-2', parentKey: [Array] }
  ],
  '0-1': [
    { title: '部门1', key: '0-1-1', parentKey: [Array] },
    { title: '部门1.5', key: '0-1-2', parentKey: [Array] }
  ],
  '0-1-1': [ { title: '2018年9月10号校招啦啦啦', key: '0-1-1-0', parentKey: [Array] } ],
  '0-1-2': [ { title: '2018年9月10号校招啦啦啦', key: '0-1-2-0', parentKey: [Array] } ],
  '0-2': [ { title: '部门2', key: '0-2-1', parentKey: [Array] } ],
  '0-2-1': [ { title: '2018年和外和发发和发挥', key: '0-2-1-0', parentKey: [Array] } ]
}

​ 操作的逻辑如下

const mapArray = (obj,array = {},keyArr = ['root']) => {
  obj.children.forEach(item => {
    if(array[keyArr[0]]) {
      array[keyArr[0]].push({
        title: item.title,
        key: item.key,
        parentKey: keyArr
      })
    }else {
      array[keyArr[0]] = [{
        title: item.title,
        key: item.key,
        parentKey: keyArr
      }]
    }
    let key = [item.key,...keyArr]
    if(item.children && item.children !==0) {
      mapArray(item,array,key)
    }
  })
  return array
}
let array = mapArray(defaultData)

​ 当你处理选中寻找父或子时如下操作

const selectedArray = [
  { title: '部门1', key: '0-1-1', parentKey: ['0-1','root'] },
]
const selectItem = { title: '部门1.5', key: '0-1-2', parentKey: ['0-1','root'] }

selectedArray.push(selectItem)

let newSelectedArray = selectedArray.filter(item => JSON.stringify(selectItem.parentKey) === JSON.stringify(item.parentKey))

let keyArr = selectItem.parentKey
// 寻找子
const mapChildren = (selectItem,selectedArray) => {
  if(array[selectItem.key]) {
    selectedArray.push(...array[selectItem.key])
    array[selectItem.key].forEach(item => {
      mapChildren(item,selectedArray)
    })
  }else {
    return
  }
}
mapChildren(selectItem,selectedArray)

// 寻找父亲
for(let i=0;i<keyArr.length-1;i++) {
  if(array[keyArr[i]].length === newSelectedArray.length) {
    let parentI = i + 1
    let newSeletctedItem = array[keyArr[parentI]].find(item => item.key === keyArr[i])
    selectedArray.push(newSeletctedItem) 
    newSelectedArray = selectedArray.filter(item => JSON.stringify(newSeletctedItem.parentKey) === JSON.stringify(item.parentKey))
  }else {
    break
  }
}