多层数组对象添加属性值

最新推荐文章于 2022-10-30 13:14:12 发布
最新推荐文章于 2022-10-30 13:14:12 发布
阅读量1.4k 收藏 6
点赞数 2
CC 4.0 BY-SA版权
分类专栏： elementUI 文章标签： 多层数组添加属性值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_38502227/article/details/93602610
本文介绍如何在具有嵌套结构的多层数组对象中动态添加属性值。通过递归方法，可以遍历任意深度的数组，并在找到合适的位置插入新的属性，这对于处理复杂数据结构尤其有用。

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

<template>
  <div class="container">
    <el-cascader
      v-model="value"
      :options="optionData"
      :show-all-levels="false"
      placeholder="正在选择数据中"
      @change="handleDeptName"
    ></el-cascader>
  </div>
</template>
<script>
export default {
  data() {
    return {
      optionData: [],
      value: [],
      vals: []
    };
  },
  created() {},
  mounted() {
    const data = [
      {
        date: "2016-05-02",
        id: "1",
        name: "第一层数据1",
        address: "1518",
        children: [
          {
            date: "2016-05-02",
            id: "11",
            name: "第二层数据11",
            address: "1518",
            children: [
              {
                date: "2016-05-02",
                id: "111",
                name: "第三层数据111",
                address: "1518",
                children: [
                  {
                    date: "2016-05-02",
                    id: "1111",
                    name: "第四层数据1111",
                    address: "1518"
                  },
                  {
                    date: "2016-05-02",
                    id: "1111",
                    name: "第四层数据1112",
                    address: "1518"
                  }
                ]
              },
              {
                date: "2016-05-02",
                id: "112",
                name: "第三层数据112",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "113",
                name: "第三层数据113",
                address: "1518"
              }
            ]
          },
          {
            date: "2016-05-02",
            id: "12",
            name: "第二层数据12",
            address: "1518",
            children: [
              {
                date: "2016-05-02",
                id: "121",
                name: "第三层数据121",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "122",
                name: "第三层数据122",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "123",
                name: "第三层数据123",
                address: "1518"
              }
            ]
          },
          {
            date: "2016-05-02",
            id: "13",
            name: "第二层数据13",
            address: "1518",
            children: [
              {
                date: "2016-05-02",
                id: "131",
                name: "第三层数据131",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "132",
                name: "第三层数据132",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "133",
                name: "第三层数据133",
                address: "1518"
              }
            ]
          }
        ]
      },
      {
        date: "2016-05-04",
        id: "2",
        name: "第一层数据2",
        address: "1517",
        children: [
          {
            date: "2016-05-02",
            id: "21",
            name: "第二层数据21",
            address: "1518",
            children: [
              {
                date: "2016-05-02",
                id: "211",
                name: "第三层数据211",
                address: "1518"
              },
              {
                date: "2016-05-02",
                name: "第三层数据212",
                id: "212",
                address: "1518"
              },
              {
                date: "2016-05-02",
                name: "第三层数据213",
                id: "213",
                address: "1518"
              }
            ]
          },
          {
            date: "2016-05-02",
            id: "22",
            name: "第二层数据22",
            address: "1518",
            children: [
              {
                date: "2016-05-02",
                id: "221",
                name: "第三层数据221",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "222",
                name: "第三层数据222",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "223",
                name: "第三层数据223",
                address: "1518"
              }
            ]
          },
          {
            date: "2016-05-02",
            id: "23",
            name: "第二层数据23",
            address: "1518",
            children: [
              {
                date: "2016-05-02",
                id: "231",
                name: "第三层数据231",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "232",
                name: "第三层数据232",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "233",
                name: "第三层数据233",
                address: "1518"
              }
            ]
          }
        ]
      },
      {
        date: "2016-05-01",
        id: "3",
        name: "第一层数据3",
        address: "1519",
        children: [
          {
            date: "2016-05-02",
            id: "31",
            name: "第二层数据31",
            address: "1518"
          },
          {
            date: "2016-05-02",
            id: "32",
            name: "第二层数据32",
            address: "1518",
            children: [
              {
                date: "2016-05-02",
                id: "321",
                name: "第三层数据321",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "322",
                name: "第三层数据322",
                address: "1518"
              },
              {
                date: "2016-05-02",
                id: "323",
                name: "第三层数据323",
                address: "1518"
              }
            ]
          },
          {
            date: "2016-05-02",
            id: "33",
            name: "第二层数据33",
            address: "1518",
            children: [
              {
                date: "2016-05-02",
                id: "331",
                name: "第三层数据331",
                address: "1518",
                children: [
                  {
                    date: "2016-05-02",
                    id: "3331",
                    name: "第三层数据3331",
                    address: "1518"
                  },
                  {
                    date: "2016-05-02",
                    id: "3332",
                    name: "第三层数据3332",
                    address: "1518"
                  },
                  {
                    date: "2016-05-02",
                    id: "3333",
                    name: "第三层数据3333",
                    address: "1518"
                  }
                ]
              },
              {
                date: "2016-05-02",
                id: "332",
                name: "第三层数据332",
                address: "1518"
              },
              {
                date: "2016-05-02",

                id: "333",
                name: "第三层数据333",
                address: "1518"
              }
            ]
          }
        ]
      }
    ];
    this.init(data)；
  },
  methods: {
  //初始化数据
    init(data) {
      const newData = data.map(item => {
        return this.addValue(item);
      });
      this.optionData = newData;
    },
    //获取选中的数据
    handleDeptName() {
      this.vals = this.getCascaderObj(this.value, this.optionData);
      console.log(this.vals[this.vals.length - 1].id);
      console.log(this.vals[this.vals.length - 1].label);
    },
    getCascaderObj(val, opt) {
      return val.map(function(value, index, array) {
        for (var itm of opt) {
          if (itm.value == value) {
            opt = itm.children;
            return itm;
          }
        }
        return null;
      });
    },
    //给初始化数据添加 label  和 value 属性
    //若有更好的方法，还请兄台告知
    addValue(item) {
      return {
        value: item.name,
        label: item.name,
        id: item.id,
        children: item.children
          ? item.children.map(itemes => {
              return this.addValue(itemes);
            })
          : ""
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
}
</style>
JavaScript判断数组对象是否含有某个值的方法（6种）
XSL_HR的博客
03-27 3万+
JavaScript基础语法——判断数组对象是否含有某个值
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
10-28
如果属性的值是数组或对象，则同样递归调用`objectToArray`。函数首先检查传入变量是否为对象，如果不是，则直接返回。如果是对象，则使用`array_map`函数并传入`__FUNCTION__`魔术常量来递归调用自身，并将结果转换...
js对象多层属性创建及赋值
weixin_44636596的博客
07-07 3748
今天由于要给一个图元的配置对象设置值，之前的都是两层 ， 现在四层，考虑不确定性，如下修改 let setDeepValue = (object, path, value) => { let fieldPath = [...path]; if (fieldPath.length) { const key = fieldPath.shift(); if (object && object[key]){ object[key] = setDeepValu
对象——对象的属性一些操作（第二层）
特大号虾米的博客
08-30 502
一、 属性访问错误和设置错误 属性访问错误：                           查询一个不存在的属性并不会报错，如果在对象o自身的属性或继承的属性均未找到属性x，属性访问表达式o.x返回undefined。                           如果对象不存在，那么查询不存在对象的属性就会报错。null和undefined值都没有属性。因此会报错。 设置错
递归---对数组中某个属性值进行改变 vue
shero888的博客
05-31 989
递归---对数组中某个属性值进行改变 vue
vue 数组中嵌套的对象添加新属性--页面更新
weixin_30412577的博客
12-13 1798
vue 数组中嵌套的对象添加新属性--页面更新：https://www.jianshu.com/p/8f0e5bb13735 转载于:https://www.cnblogs.com/bydzhangxiaowei/p/10115433.html
js查找树形结构的第三层，给第三层添加属性
Cupid
10-27 778
js查找树形结构的第三层，给第三层添加属性
js多层数组对象添加属性值
02-14
### 动态添加属性至多层嵌套数组对象 在处理复杂的 JavaScript 数据结构时，特别是当涉及到多层嵌套的数组和对象组合的情况下，可以采用递归函数的方式来遍历整个数据树并动态地为指定的对象节点添加新的属性。 ...
js代码-按要求从数组中获取属性添加到对象上
07-16
例如，如果数组中的对象可能包含其他对象，我们可以递归地遍历并添加属性： ```javascript function addProperties(obj, source) { for (let key in source) { if (typeof source[key] === 'object' && source...
数组对象给对象添加新属性并赋值
最新发布
08-14
如果需要修改特定条件的元素（例如根据某个属性值判断），可以使用`map()`方法创建新数组。这种方法不会改变原数组，而是返回新数组： ```javascript let arr = [ { name: 'Alice', age: 25 }, { name: 'Bob', age...
树形组件（可动态添加属性、无限嵌套）及递归展示tree数据
程邓楠的博客
07-11 1058
前言： 公司的业务要求，做一个动态添加子属性或统计属性的一个业务，网上没有找到特别合适的，就自己参考了一些demo做了一个小组件，希望大佬们可以多多留言指点！ 1、做法 要实现动态的渲染我们拿到的不知道有几层的菜单数据，有两种解决方案： 操作 dom 去一层一层 添加子菜单（vue 不推荐操作 dom，所以不推荐此方案） 将我们的菜单封装到组件中，通过递归组件实现菜单渲染 具体效果如下图： 2、数据 options: [ { id: "473d..
Vue.js Element 表单使用
黑客三遍猪
04-08 893
参考 Vue进阶（三十）：vue中使用element-ui进行表单验证 element-ui vue表单验证踩坑 Vue项目elementUI中封装表单验证 学习element中，觉得得多封装一下一些函数，比如form验证 ...
vue项目经验：基于Element-ui实现表格弹窗组件
weixin_45031595的博客
11-04 5571
效果图 使用方式 acTable1 () { this.$modalTable({ title: "表格一", tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
js多维数组对每项对象修改、添加属性
m0_59010608的博客
10-30 1978
用正则与递归对多维数组中每项对象修改、添加属性
如何改变原对象数组中的某个属性值
qq_42931285的博客
05-19 4233
对象数组 、forEach、map、解构赋值
JavaScript 数组批量设置对象的属性
sy_love2010的博客
01-15 7729
有个需求，将本页面所有消息批量设置为已读，由于使用vue.js，则直接修改数据，将数组中每个对象的状态设置为已读，但是没有找到一个简便的方法，查询以后发现JS Array有个map()方法，官方定义为： map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。不修改数组本身 语法： let new_array = arr.map(function callba
js递归多层通过id获取当前对象数据
qq_43693823的博客
12-17 2602
js递归多层通过id获取当前对象数据
怎么给数组里的每个对象都添加一个新属性
weixin_47353884的博客
08-06 3625
需要新加一个字段 在接口请求过来的时候就加到res.data里，然后赋值给this.tableList 不然双向绑定不上 res.data是原数组 let newArr = [] res.data.map((item, index) => { newArr.push( Object.assign(item, { editsave: false} ) ) }) this.tableList=newArr ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值