首页 > 其他分享 >Vue将数据按照某个属性创建分组

Vue将数据按照某个属性创建分组

时间:2022-12-13 18:58:32浏览次数:52  
标签:keysArr Vue list item 分组 key let 属性

 /**
     *
     * @param list 待处理列表
     * @param key  分组字段
     * @returns {{[p: string]: *, list: *}[]}
     */
    handleData(list,key){
      //得到数据的主键列表
      let keysArr = list.map(item=>item[key])
      let keys = [...new Set(keysArr)]
      let newList = keys.map(item=>{
        return {
          //这里写新的 数据结构 如下是整体复制
          [key]:item,
          children:list.filter(i=>i[key]==item)
        }
      })return newList;
    },

 

标签:keysArr,Vue,list,item,分组,key,let,属性
From: https://www.cnblogs.com/Timeouting-Study/p/16979612.html

相关文章

  • vue的elementui的时间控件 如何设置输出时间格式(el-date-picker:日期选择器、日期时间
    注:使用value-format<el-date-pickerclass="topfontstyle"v-model="listMain.time"type="daterange"......
  • swiper常用属性
    <view> <!-- 指示点:indicator-dots 自动轮播:autoplay 轮播间隔:interval 使用衔接动画:circular 动画的时长:duration --> <swiperclass="swiper"indi......
  • Vue3.0文档学习心得--依赖注入
    1.provide():在祖先组件或整个应用(通过 app.provide()) 提供一个值,可以被后代组件注入。(1)第一个参数是要注入的key,可以是一个字符串或者一个symbol,第二个参数是要......
  • 移动端 cordova vue videojs 全屏播放后退出全屏返回后退出app问题
    问题描述移动端上面使用了videojs播放视频,同时也监听了手机返回事件document.addEventListener('backbutton',。接着我们点击全屏播放后在退出全屏在返回后直接退出了app......
  • 饮冰三年-人工智能-Pandas-81-Pandas 数据分析-分组统计
    上一篇:饮冰三年-人工智能-Pandas-80-Pandas数据扩增 数据准备可参考:饮冰三年-人工智能-Django淘宝拾遗-75-数据准备一、分组统计Pandas的分组聚合groupby 首先使用gr......
  • vue3 Element Plus 之 Message 消息提示 提示框 宽度 不对 横排不居中
    官网地址>>引入后样式不对截图:在App.vue贴上代码如下:附上代码:.el-message__content{width:auto;height:auto;background:none;}达到期望结果截图......
  • vue项目自动导入components
    开发项目中一般组件都放在components目录下,对于一些高频使用的组件我们需要在入口文件中设置为全局组件,一个一个搞,很繁琐,这里通过webpack自动挂载components为全局组件......
  • SpringBoot和VUE
    一、案例结构用springboot做后端接口,采用restful风格。用vue-cli来创建前端项目,通过axios进行前后端交互。来实现用户的增删改查操作。二、效果图点击修改:点击添加:三、服务......
  • C# IMEMODE属性
    近日忽然想要控制文本框的输入法,输入英文和数字,而不能输入中文。结果搜索发现文本框自带一个IMEMODE的属性。分析其各项参数:在此我使用的是Disable属性,调出后默认为英文......
  • 力扣-49-字母异位词分组
    字母异位词就是:组成单词的字母相同,只是字母位置不同的单词没什么思路,朴素思路,先全部放到set里,然后不空就取一个出来,回溯构造所有的异位词和set中匹配public:vector<......