zoukankan      html  css  js  c++  java
  • Vue 里面对树状数组进行增删改查 的方法

    [
    {
    "id":"5e4c3b02fc984961a17607c37712eae0", "optLock":0, "parentId":"31372c5ce7c84eb1862c21b5af85b4d2", "name":"1111", "type":0, "subCatalogues": [
    {
    "id":"7bf755f26c0e499898504a34877a4fce", "optLock":0, "parentId":"5e4c3b02fc984961a17607c37712eae0", "name":"3333", "type":0, "subCatalogues":[
    {
    "id":"2b08b56ab72641ffa1373813082e95c5", "optLock":0," parentId":"7bf755f26c0e499898504a34877a4fce", "name":"4444", "type":1," subCatalogues":null       }     ]   }  ] },
    {
    "id":"dcf5854558ae47e7b52918c4af861385", "optLock":0, "parentId":"31372c5ce7c84eb1862c21b5af85b4d2", "name":"2222", "type":0, "subCatalogues":[
    {
    "id":"7acad754831b4b81b87bff33d6090166", "optLock":0, "parentId":"dcf5854558ae47e7b52918c4af861385", "name":"5555", "type":0, "subCatalogues":[
    {
    "id":"4eb8db6f27f644b28a8c791208f55946", "optLock":0, "parentId":"7acad754831b4b81b87bff33d6090166", "name":"6666", "type":1, "subCatalogues":null   }
    ]

      上面是数据结构, 方法实现的目的,通过传入的 parentId 找到父级,向父级的subCatalogues添加 一个对象

       handleLocalData(pId) {
          return findPidNode(this.data) //这里的data 数据就是 上面的数组
          function findPidNode(data) {
            data = data ? data : []
            for (let i = 0, n = data.length; i < n; i++) {
              let node = findInTree(data[i])
              if (node) {
                return node //这里得到的就是 parentId 得到的父级对象
              }
            }
          }
          function findInTree(tree) {
            if (tree.id == pId) {
              return tree
            } else {
              return findPidNode(tree.subCatalogues)
            }
          }
        }
    

      通过数组是引用数据类型特征,改变数据结构就能引起 this.data 里面数据的变化,从而引起ui 图的跟新

      如何使用 handleLocalData() 方法(这里删除来说):

                let node = this.handleLocalData(this.parentId) //这里得到的this.parentId就是上面数据结构里面的 parentId,因为我通过ui 组件单独他它给列出来啦
                if (node) { //这里判断是因为 在顶级的数组是没有parentId 的 ,如果没有父级 就需要想同级添加了,而不是添加到 subCatalogues 里面
                  let index = node.subCatalogues.findIndex(
                    e => e.id == this.parentId
                  )
                  node.subCatalogues.splice(index, 1)
                } else {
                  let index2 = 0
                  this.data.forEach((item, index) => {
                    if (item.id == this.parentId) {
                      index2 = index
                    }
                  })
                  this.data.splice(index2, 1)
                }
    

      

  • 相关阅读:
    高并发时,使用Redis应注意的问题 及 Redis缓存帮助类
    NetCore3.1 如何添加带有JWT Token 验证的Swagger
    CSS 技巧一则 -- 不定宽溢出文本适配滚动
    ROS costmap_2d局部障碍物无法清除和机器人到点摇摆
    ROS OccupancyGrid使用说明
    ROS RVIZ显示点云地图的二维投影
    Linux 文档生成器doxygen
    高翔博士 资源索引
    SLAM中的数学基础 第四篇 李群与李代数2
    shell(8):循环
  • 原文地址:https://www.cnblogs.com/SuperBrother/p/12618519.html
Copyright © 2011-2022 走看看