0
点赞
收藏
分享

微信扫一扫

将数据转成树形结构并且替换其中的类名让其可以用在element树形控件上

zhaoxj0217 2022-03-31 阅读 45

const dataeee = [
{
“ID”: 11113,
“ParentID”: 11105,
“MenuName”: “新菜单项”,
“CreateTime”: “2022-03-27 14:23:33”,
“IsDeleted”: false
},
{
“ID”: 11112,
“ParentID”: 11105,
“MenuName”: “充值记录”,
“CreateTime”: “2022-03-27 14:23:26”,
“IsDeleted”: false
},
{
“ID”: 11111,
“ParentID”: 10100,
“MenuName”: “附加能力实验室价格”,
“CreateTime”: “2022-03-27 12:11:54”,
“IsDeleted”: false
},
{
“ID”: 11110,
“ParentID”: 11104,
“MenuName”: “服务方案(商铺)”,
“CreateTime”: “2022-03-24 17:26:10”,
“IsDeleted”: false
},
{
“ID”: 11109,
“ParentID”: 11105,
“MenuName”: “发票信息”,
“CreateTime”: “2022-03-22 15:42:05”,
“IsDeleted”: false
},
{
“ID”: 11108,
“ParentID”: 11105,
“MenuName”: “地址管理”,
“CreateTime”: “2022-03-22 15:39:34”,
“IsDeleted”: false
},
{
“ID”: 11107,
“ParentID”: 11105,
“MenuName”: “用户认证管理”,
“CreateTime”: “2022-03-22 14:39:02”,
“IsDeleted”: false
},
{
“ID”: 11106,
“ParentID”: 11105,
“MenuName”: “检测账户”,
“CreateTime”: “2022-03-22 14:38:35”,
“IsDeleted”: false
},
{
“ID”: 11105,
“ParentID”: 0,
“MenuName”: “检验用户管理”,
“CreateTime”: “2022-03-22 14:37:42”,
“IsDeleted”: false
},
{
“ID”: 11104,
“ParentID”: 0,
“MenuName”: “方案管理”,
“CreateTime”: “2022-03-17 21:19:05”,
“IsDeleted”: false
}
]

// 调用 转换树形的方法
let liss = getTree(dataeee)

function getTree(data) {
  // 把一级数据分离出来   ParentID === 0
  const parents = data.filter((ele) => ele.ParentID === 0)
  // 把子级数据分离出来   ParentID !== 0
  const children = data.filter((ele) => ele.ParentID !== 0)
  dataListTree(parents, children)
  return parents
  function dataListTree(parents, children) {
    parents.map((p) => {
      children.map((c) => {
        if (c.ParentID === p.ID) {
          if (p.children) {
            p.children.push(c)
          } else {
            p.children = [c]
          }
        }
      })
    })
  }
}
console.log('树形结构', liss)


let NewData =  liss.map((ele) =>TreeArrar(ele))
console.log('变成可以给属性控件使用的',NewData)
function TreeArrar(data) {
  const hasChild = data.children && data.children.length > 0
  return {
    //   element UI 树形控件上那个文字内容需要的是  label 属性,而获取的数据中没有,我们就把  MenuName 这个属性 改成我们需要的
    label: data.MenuName,
    ID: data.ID,
    ParentID:data.ParentID,
    CreateTime:data.CreateTime,
    children: hasChild ? data.children.map((i) => this.TreeArrar(i)) : []
  }
}

把数组中的某个部分改成我们需要的名字

举报

相关推荐

0 条评论