js递归遍历树结构(ant Design Vue的树形控件)

ant Design Vue的树形控件中要求的数据格式如下:

treeData = [ {
    name: '总文件夹',
    key: '0',
    children: [
      {
        name: '文件夹1',
        key: '0-0',
        children: [
          { name: '文件夹1-1', key: '0-0-1'},
          { name: '文件夹1-2', key: '0-0-2' },
        ],
      }
    ]
  }]

后台返回的数据结构是:

treeData = [ {
    value: '总文件夹',
    id: '0',
    children: [
      {
        value: '文件夹1',
        id: '0-0',
        children: [
          { value: '文件夹1-1', id: '0-0-1'},
          { value: '文件夹1-2', id: '0-0-2' },
        ],
      }
    ]
  }]

所以需要用递归方法整理下后台返回的值,方法如下:

treeDataFun(data) {
	let arr = []
	data.forEach(item=>{
		arr.push({
			key: item.id,
			name: item.value,
			children: this.treeDataFun(item.data)
		})
	})
	return arr;
}

版权声明:本文为weixin_45629194原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。