问答

js/vue/react 通过条件判断删除树形结构某条数据

作者:admin 2021-05-06 我要评论

数据结构↓ const data = [{ name: '水果大全', id: '111', children: [{ name: '浆果类', id: '112', children: [{ name: '草莓', id: '113', isOpen: true }, ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

数据结构↓

const data = [{
        name: '水果大全',
        id: '111',
        children: [{
          name: '浆果类',
          id: '112',
          children: [{
            name: '草莓',
            id: '113',
            isOpen: true
          }, {
            name: '桑椹',
            id: '114',
            isOpen: true
          }, {
            name: '黑莓',
            id: '115',
            isOpen: true
          }]
        }, {
          name: '柑橘类',
          id: '116',
          children: [{
            name: '橘子',
            id: '117',
            isOpen: true
          }, {
            name: '橙子',
            id: '118',
            isOpen: true
          }]
        }]
      }, {
        name: '奥特曼大全',
        id: '119',
        children: [{
          name: '昭和类',
          id: '120',
          children: [{
            name: '杰克',
            id: '121',
            isOpen: true
          }, {
            name: '泰罗',
            id: '122',
            isOpen: true
          }, {
            name: '艾斯',
            id: '123',
            isOpen: true
          }]
        }, {
          name: '平成类',
          id: '124',
          children: [{
            name: '迪迦',
            id: '125',
            isOpen: true
          }, {
            name: '盖亚',
            id: '126',
            isOpen: false // 这里是false,所以不要这一条id为126,name为盖亚的数据
          }]
        }]
      }]

如上代码所示,用isOpen来判定,如果是false的话就删除那条数据,数据结构不变

理想效果↓

 //没有盖亚那条数据了
const data = [{
        name: '水果大全',
        id: '111',
        children: [{
          name: '浆果类',
          id: '112',
          children: [{
            name: '草莓',
            id: '113',
            isOpen: true
          }, {
            name: '桑椹',
            id: '114',
            isOpen: true
          }, {
            name: '黑莓',
            id: '115',
            isOpen: true
          }]
        }, {
          name: '柑橘类',
          id: '116',
          children: [{
            name: '橘子',
            id: '117',
            isOpen: true
          }, {
            name: '橙子',
            id: '118',
            isOpen: true
          }]
        }]
      }, {
        name: '奥特曼大全',
        id: '119',
        children: [{
          name: '昭和类',
          id: '120',
          children: [{
            name: '杰克',
            id: '121',
            isOpen: true
          }, {
            name: '泰罗',
            id: '122',
            isOpen: true
          }, {
            name: '艾斯',
            id: '123',
            isOpen: true
          }]
        }, {
          name: '平成类',
          id: '124',
          children: [{
            name: '迪迦',
            id: '125',
            isOpen: true
          }]
        }]
      }]   

我该怎么操作呢,感谢各位大神大哥的指导,可能对你们来说很简单,但我对树形结构得操作一窍不通,先感谢你们的回答,小弟感激不尽,还请轻喷!

###
demo(data, 2)
console.log('删除后的数据:', data)
/**
 * @param {Array} list 
 * @param {Number} targetTier 需要操做的层数
 * @param {Number} [tier=0] 起始层数,默认0
 * @return {Array} 删除后的数据
*/
function demo (list, targetTier, tier) {
  tier = tier || 0
  if(getType(list) === 'Array') {
    for(var a = 0, item; a < list.length; a++) {
      item = list[a]
      if(getType(item) === 'Object') {
        !item.isOpen && tier===targetTier && list.splice(a--, 1)
        demo(item.children, targetTier, tier + 1)
      }
    }
  }
  return list
}

function getType (data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • js/vue/react 通过条件判断删除树形结

    js/vue/react 通过条件判断删除树形结

  • 为什么网页中行距要比word中的行距小

    为什么网页中行距要比word中的行距小

  • 在Vue中使用Element,高度不够会出现白

    在Vue中使用Element,高度不够会出现白

  • 有没有大佬熟悉qiankun微前端

    有没有大佬熟悉qiankun微前端

腾讯云代理商
海外云服务器