关于ant design 树控件中遇到后台返回数据和jstree要求格式不一致的解决办法

最新推荐文章于 2024-08-19 14:54:00 发布

原创最新推荐文章于 2024-08-19 14:54:00 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了一种将后端返回的复杂层级数据转换为前端所需树形结构的方法，通过递归函数实现了json数据中key、title、children字段的格式转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照官网文档上数据应该是这样子

const treeData = [{
  title: '0-0',
  key: '0-0',
  children: [{
    title: '0-0-0',
    key: '0-0-0',
    children: [
      { title: '0-0-0-0', key: '0-0-0-0' },
      { title: '0-0-0-1', key: '0-0-0-1' },
      { title: '0-0-0-2', key: '0-0-0-2' },
    ],
  }, {
    title: '0-0-1',
    key: '0-0-1',
    children: [
      { title: '0-0-1-0', key: '0-0-1-0' },
      { title: '0-0-1-1', key: '0-0-1-1' },
      { title: '0-0-1-2', key: '0-0-1-2' },
    ],
  }, {
    title: '0-0-2',
    key: '0-0-2',
  }],
}, {
  title: '0-1',
  key: '0-1',
  children: [
    { title: '0-1-0-0', key: '0-1-0-0' },
    { title: '0-1-0-1', key: '0-1-0-1' },
    { title: '0-1-0-2', key: '0-1-0-2' },
  ],
}, {
  title: '0-2',
  key: '0-2',
}]

可是在有时候链条的时候不可能都尽如人意有时候会需要我们前端自行去处理后台返回来的数据
那么假如后台返回的数据是这样子的

"treeData ": [{
	"id": 82,
	"name": "管理员模块",
	"type": "group",
	"client": [{
		"id": 83,
		"name": "管理员管理",
		"type": "contro",
		"client": [{
			"id": 84,
			"name": "管理员列表",
			"type": "action"
		}, {
			"id": 85,
			"name": "添加页",
			"type": "action"
		}, {
			"id": 86,
			"name": "添加",
			"type": "action"
		}, {
			"id": 87,
			"name": "详情",
			"type": "action"
		}, {
			"id": 88,
			"name": "编辑页",
			"type": "action"
		}, {
			"id": 89,
			"name": "编辑",
			"type": "action"
		}, {
			"id": 90,
			"name": "删除",
			"type": "action"
		}]
	}, {
		"id": 91,
		"name": "节点管理",
		"type": "contro",
		"client": [{
			"id": 92,
			"name": "节点列表",
			"type": "action"
		}, {
			"id": 93,
			"name": "添加页面",
			"type": "action"
		}, {
			"id": 94,
			"name": "添加",
			"type": "action"
		}, {
			"id": 95,
			"name": "详情",
			"type": "action"
		}, {
			"id": 96,
			"name": "编辑页面",
			"type": "action"
		}, {
			"id": 97,
			"name": "编辑",
			"type": "action"
		}, {
			"id": 98,
			"name": "删除",
			"type": "action"
		}]
	}, {
		"id": 99,
		"name": "角色管理",
		"type": "contro",
		"client": [{
			"id": 100,
			"name": "角色列表",
			"type": "action"
		}, {
			"id": 101,
			"name": "添加页面",
			"type": "action"
		}, {
			"id": 102,
			"name": "添加",
			"type": "action"
		}, {
			"id": 103,
			"name": "详情",
			"type": "action"
		}, {
			"id": 104,
			"name": "编辑页面",
			"type": "action"
		}, {
			"id": 105,
			"name": "编辑",
			"type": "action"
		}, {
			"id": 106,
			"name": "删除",
			"type": "action"
		}, {
			"id": 107,
			"name": "权限获取",
			"type": "action"
		}, {
			"id": 108,
			"name": "权限分配",
			"type": "action"
		}]
	}]
}]

那么就需要我们自行把json数据中的key转换为文档上 key title children的格式我自己采用的办法是这样子的

changeData(data){
      let that = this
      let jsonObj = data
      jsonObj.forEach(function(item){
        item.name && (item.title = item.name)
        item.id && (item.key = item.id)
        delete item.name
        delete item.id
        if(item.client && Array.isArray(item.client)){
          item.children = that.changeData(item.client)
          delete item.client
        }
      })  
      return jsonObj
    },
通过递归调用一步步更新格式 再删除之前的格式 有需要的可以参考下