vue3.0的数组对象提取相同的属性值

最新推荐文章于 2024-05-23 08:55:52 发布
最新推荐文章于 2024-05-23 08:55:52 发布
阅读量2.2k 收藏 3
点赞数 1
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52611940/article/details/128582211
版权

第一种的vue3.0数组对象提取相同的属性值示例

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const Total = ref(3)
const list = ref([
    {
        "PERSONNAME": "储军",
        "NATIONNAME": "汉",
        "SEXNAME": "男",
        "EDULEVELNAME": "大专",
        "DEGREENAME": "无学位",
        "IDCARDTYPENAME": "身份证",
        "CORPCODE": "91330110MA2B2TAQ77",
        "CORPNAME": "杭州晨磊建设工程有限公司",
        "SPECIALTYTYPENAME": "注册建造师（二级）",
        "AWARDDATE": "2007-09-03",
        "EFFECTDATE": "2024-01-04",
        "CERTNUM": "浙233070720244",
        "IDCARD1": "3209************12",
        "AWARDDEPART": "浙江省住房和城乡建设厅",
        "ZHUANYE": "市政公用工程",
        "IDCARD": "hutyVxqhaVieCQeXGRPwaiN7p1eNx5VENpIbd6pIWQw="
    },
    {
        "PERSONNAME": "储军",
        "NATIONNAME": "汉",
        "SEXNAME": "男",
        "EDULEVELNAME": "大专",
        "DEGREENAME": "无学位",
        "IDCARDTYPENAME": "身份证",
        "CORPCODE": "91330110MA2B2TAQ77",
        "CORPNAME": "杭州晨磊建设工程有限公司",
        "SPECIALTYTYPENAME": "注册建造师（二级）",
        "AWARDDATE": "2007-09-03",
        "EFFECTDATE": "2025-11-30",
        "CERTNUM": "浙233070720244",
        "IDCARD1": "3209************12",
        "AWARDDEPART": "浙江省住房和城乡建设厅",
        "ZHUANYE": "建筑工程",
        "IDCARD": "hutyVxqhaVieCQeXGRPwaiN7p1eNx5VENpIbd6pIWQw="
    },
    {
        "PERSONNAME": "储军",
        "NATIONNAME": "汉",
        "SEXNAME": "男",
        "EDULEVELNAME": "大专",
        "DEGREENAME": "无学位",
        "IDCARDTYPENAME": "身份证",
        "CORPCODE": "91330110MA2B2TAQ77",
        "CORPNAME": "杭州晨磊建设工程有限公司",
        "SPECIALTYTYPENAME": "项目负责人",
        "AWARDDATE": "2008-05-04",
        "EFFECTDATE": "2023-02-27",
        "CERTNUM": "浙建安B(2008)0100622",
        "IDCARD1": "3209************12",
        "AWARDDEPART": "浙江省住房和城乡建设厅",
        "ZHUANYE": "",
        "IDCARD": "hutyVxqhaVieCQeXGRPwaiN7p1eNx5VENpIbd6pIWQw="
    },
    {
        "PERSONNAME": "储军",
        "NATIONNAME": "汉",
        "SEXNAME": "男",
        "EDULEVELNAME": "大专",
        "DEGREENAME": "无学位",
        "IDCARDTYPENAME": "身份证",
        "CORPCODE": "91330110MA2B2TAQ77",
        "CORPNAME": "杭州晨磊建设工程有限公司",
        "SPECIALTYTYPENAME": "errtt",
        "AWARDDATE": "2008-05-04",
        "EFFECTDATE": "2023-02-27",
        "CERTNUM": "浙建安B(2008)0100622",
        "IDCARD1": "3209************12",
        "AWARDDEPART": "浙江省住房和城乡建设厅",
        "ZHUANYE": "",
        "IDCARD": "hutyVxqhaVieCQeXGRPwaiN7p1eNx5VENpIbd6pIWQw="
    }
]) as any



onMounted(() => {
    // 定义一个对象来接收重新构造的数组
    let dataInfo = {} as any
    //通过map遍历list数据获取遍历后的数据
    list.value.map((item:any) => {
        let dataInfo1 = {} as any
        //获取item里面的SPECIALTYTYPENAME属性的值
        let { SPECIALTYTYPENAME } = item
        if(!dataInfo[SPECIALTYTYPENAME]) {
            // 构建一个新的对象
            dataInfo[SPECIALTYTYPENAME] = {
                HisSerilNo: SPECIALTYTYPENAME,
                data: []
 
            }
        }
        dataInfo1 = item
        //将赋值好的对象push到dataInfo[SPECIALTYTYPENAME]的data数组里面
        dataInfo[SPECIALTYTYPENAME].data.push(dataInfo1)

    })
    // 将处理好的数据通过Object.values返回成一个数组
    let result = Object.values(dataInfo)
    console.log(result,'result');
    list.value = result
})
</script>

<template>
    <div>
        <div class="aptitude">
            <div class="allTotal">
                该人员共有
                <span>{{ Total }}</span> 项执业信息，详细情况如下：
            </div>
            <table class="tableBox" v-if="Total > 0" border="1">
                <tbody v-for="(item, i) in list" :key="i" >
                    <tr>
                        <td colspan="4" class="tableBox_td">
                            {{ item.HisSerilNo }}
                        </td>
                    </tr>
                    <template v-for="(info, i) in item.data" :key="i">
                        <tr>
                            <td class="bg">所属企业名称</td>
                            <td>{{ info.CORPNAME }}</td>
                            <td class="bg">发证单位</td>
                            <td>{{ info.AWARDDEPART }}</td>
                        </tr>
                        <tr>
                            <td class="bg">发证日期</td>
                            <td colspan="3">
                                {{ info.AWARDDATE == "年月日" ? "" : info.AWARDDATE }}
                            </td>
                        </tr>
                        <tr>
                            <td class="bg">专业</td>
                            <td>{{ info.ZHUANYE }}</td>
                            <td class="bg">有效期</td>
                            <td>{{ info.EFFECTDATE == "年月日" ? "" : info.EFFECTDATE }}</td>
                        </tr>
                        <tr style="height: 20px"></tr>
                    </template>
                </tbody>
            </table>
            <div v-else>
                <p style="
            text-align: center;
            padding: 30px 0px;
            border: 1px solid #d9d9d9;
            border-top: 0px;
          ">
                    暂无数据
                </p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.tableBox {
    margin-bottom: 20px;
    border-collapse:collapse;
}

.tableBox tbody em.name {
    font-size: 13px;
    color: #007af8;
    font-style: normal;
    position: relative;
}

.tableBox tbody tr td {
    width: 300px;
}

.tableBox tbody em.name::after,
.tableBox tbody em.name:after {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 2px;
    content: "";
    background: #007af8;
    left: 50%;
    margin-left: -10px;
    bottom: -8px;
}

.tableBox_td {
    text-align: left;
    color: #007af8;
    font-size: 18px;
    font-weight: bold;
}
</style>

第二种：构建一个需要处理的json字符串

json1 = {
    "ResultCode": "0",
    "Count": "5",
    "ReturnQty": "5",
    "List":  [{
                "HisDocumentNo": "W5702089",
                "HisSerilNo": "230551010032000072207050627609",
                "PrescDateTime": "2022-07-05 15:05:12",
                "ItemName": "单项补体测定（C1q）",
            },
            {
                "HisDocumentNo": "W5702090",
                "HisSerilNo": "230551010032000072207050627609",
                "PrescDateTime": "2022-07-05 15:05:12",
                "ItemName": "一次性使用静脉采血器",
            },
            {
                "HisDocumentNo": "W5702093",
                "HisSerilNo": "230551010032000072207050627609",
                "PrescDateTime": "2022-07-05 15:05:12",
                "ItemName": "全血细胞计数+五分类",
            },
            {
                "HisDocumentNo": "W5702095",
                "HisSerilNo": "230551010032000072207050627609",
                "PrescDateTime": "2022-07-05 15:05:12",
                "ItemName": "四肢多普勒血流图",
            },
            {
                "HisDocumentNo": "W5702096",
                "HisSerilNo": "230551010032000072207050627609",
                "PrescDateTime": "2022-07-05 15:05:12",
                "ItemName": "颅脑（脑组织）磁共振平扫",
            },
            {
                "HisDocumentNo": "W5702095",
                "HisSerilNo": "23055101003200007220705062760",
                "PrescDateTime": "2022-07-05 15:05:12",
                "ItemName": "四肢多普勒血流图",
            },
            {
                "HisDocumentNo": "W5702096",
                "HisSerilNo": "230551010032000072207050627609",
                "PrescDateTime": "2022-07-05 15:05:12",
                "ItemName": "颅脑（脑组织）磁共振平扫",
            }
        ]
    }

2、通过js代码实现数据的重构

// 定义一个对象来接收重新构造的数组
    let dataInfo = {}
    //通过map遍历json数据获取遍历后的数据
    json1.List.map(item => {
        let dataInfo1 = {}
        //获取item里面的HisSerilNo属性的值
        let { HisSerilNo } = item
        if(!dataInfo[HisSerilNo]) {
            // 构建一个新的对象
            dataInfo[HisSerilNo] = {
                HisSerilNo: HisSerilNo,
                data: []
 
            }
        }
        //给对象添加字段以及赋值
        dataInfo1.ItemName = item.ItemName
        dataInfo1.HisDocumentNo = item.HisDocumentNo
        //将赋值好的对象push到dataInfo[HisSerilNo]的data数组里面
        dataInfo[HisSerilNo].data.push(dataInfo1)
        
    })
    // 将处理好的数据通过Object.values返回成一个数组
    let result = Object.values(dataInfo)
    //遍历数组
    result.forEach(item => {
        console.info(item)
    })

3、最后构造出来的对象数组

{
  HisSerilNo: '230551010032000072207050627609',
  data: [
    { ItemName: '单项补体测定（C1q）', HisDocumentNo: 'W5702089' },
    { ItemName: '一次性使用静脉采血器', HisDocumentNo: 'W5702090' },
    { ItemName: '全血细胞计数+五分类', HisDocumentNo: 'W5702093' },
    { ItemName: '四肢多普勒血流图', HisDocumentNo: 'W5702095' },
    { ItemName: '颅脑（脑组织）磁共振平扫', HisDocumentNo: 'W5702096' },
    { ItemName: '颅脑（脑组织）磁共振平扫', HisDocumentNo: 'W5702096' }
  ]
}
{
  HisSerilNo: '23055101003200007220705062760',
  data: [ 
    { ItemName: '四肢多普勒血流图', HisDocumentNo: 'W5702095' 
    } 
  ]
}

Object.values()的返回值为一个包含对象自身的所有可枚举属性值的数组

m0_52611940
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 对象数组中，根据相同属性的数据合并，重组新的数组对象
01-20
在Vue.js开发中，处理对象数组并根据特定属性进行数据合并和重组是常见的需求。本问题探讨了如何根据`TYPE`和`REMARK`两个属性的值来决定是否合并对象，并生成新的数组对象。首先，我们需要理解源数据的结构，然后...
Vue如何循环提取对象数组中的值
01-21
1.数据如下，提取name和callcount 2代码. getQueryCallStatistics(sesp1, this.provinceId).then((res) => { let arr = []; let arr1 = []; let arr2 = []; let arr3 = []; let arr4 = []; this.xunshiMap =...
vue两对象赋值后一直相等，或改变一个对象另一个对象跟着改变问题
机智如我
01-07 3805
在vue中，假如定义一个对象 var obj1 = { index:1, name:first } var x = obj1; obj1.index = 2; console.log(x.index) 这个得出的结果也是2，原因好像是vue将obj1的地址给了x，这样x实际是指向的obj1相当于指针。今天在实际应用中也发现一个更隐藏的bug。 load(){ this.old = [...
取出两个数组不同或者相同之处，当数组元素为对象时
HeMister的博客
07-17 986
取出两个数组不同或者相同之处，当数组元素为对象时 //取出两个数组不同之处 let userList = [{id:1},{id:2},{id:3},{id:4},{id:5},{id:6}]; let checkboxList = [{id:1},{id:2}]; //userList = userList.filter(item =>{return checkboxList.map(i...
Vue3 避免直接引用对象/数组 props
最新发布
油墨香^-^的博客
05-23 58
这些规范允许子组件影响父组件的状态...... 下面的官方文档还指出，最好的做法是避免此类更改，除非设计在父子之间紧密耦合，因为这使得以后很难确定数据流。传递，则子组件无法直接修改父组件传递的对象或数组的属性。但是，如果对象或数组属性发生更改，Vue3 将检测到更改并更新父组件的数据。作为子组件传递时，无法更改对象或数组本身，但可以更改对象或数组的嵌套属性。是单值的，因此子组件中的更改将被视为与局部变量的更改相同。定义为计算为新数组和新对象的值。值将不会反映父组件中的更改。也将始终引用新的数组和新的对象。
vue3.0概述
qq_45555892的博客
08-09 1001
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy代
初入vue3之---＞关于vue3的数据绑定（主要是对象和数组）
m0_55336994的博客
02-13 2827
vue3的双向绑定
数组对象取出某一属性相同的元素，返回对应数组的方法
weixin_57182748的博客
07-29 864
最后得到的结果如下，这个是没有将数组解构前的,此处是根据网上的方法创作而来，其实有很多去重的方法，这个算是代码比较少的。
vue 里面通过v-for循环出来多个相同样式的div,根据index作为对象的属性的参数拼接取值
是大林的林吖-博客
07-23 3251
一、[ ] 和 . 的区别 1、 . 是要对象存在该属性才可赋值取出 2、 [ ] 即使对象不存在该属性也可以赋值和取出 二、v-for循环 通过 v-for=“index of number” ，number为自定义的一个数字 三、.后面不能让字符串与index进行拼接，而[ ] 里面是可以让字符串与index进行拼接。即 对象[“字符串”+index] 四、代码实现 <div class="battery" style="margin-top: 10px; margin-left: 30px"&
vue数组对象排序的实现代码
08-27
Vue 数组对象排序的实现代码主要介绍了在 Vue 框架中对数组对象的排序方法，包括普通数组的排序和数组对象的排序。下面是对应的知识点： 普通数组的排序 在 Vue 中，对普通数组的排序可以使用 `sort()` 方法，但是...
vue中的循环对象属性和属性值用法
10-14
总结起来，Vue中的`v-for`指令不仅可以应用于数组，还可以优雅地处理对象属性的遍历。同时，Vue Router的`scrollBehavior`方法则提供了强大的控制页面滚动行为的能力，让开发者能够精确地控制路由跳转后的页面滚动...
vue中对象数组去重的实现
10-15
主要介绍了vue中对象数组去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue使用v-for同时遍历对象和数组
weixin_45663697的博客
03-05 1080
需求  有一个userMsg对象和一个userMsgTitle数组，需要将这两组数据使用v-for循环遍历，得到下面图片所示的效果 数据 data() { return { userMsgTitle:["昵称","签名","注册","性别","生日","电话","邮箱","密码"], userMsg:{ nickname: "嗷呜是唔西迪西啊！", sign:"退一步海阔天空。",
Js：获取数组对象重复属性值和数组对象去重
m0_44973790的博客
02-27 4308
数组对象去重
JS 一个数组对象中相同的属性值
qq_40055200的博客
08-25 688
【代码】JS 数组对象中相同的属性值。
Vue 两个对象存在相同的key并进行赋值
weixin_43484014的博客
05-26 1146
但是太麻烦了，如果字段多，代码就难看。
对象属性值相同放到同一个数组中
Laohei0101的博客
10-26 1190
对象的属性值相同，放入到同一个数组中。
Vue：Vue3中的data数据对象获取真实值而不是Proxy代理对象
彭世瑜的博客
07-12 1684
如果想获取到原始的Object对象，而非Proxy代理对象，可以使用如下方式。toRaw()​：根据一个 Vue 创建的代理返回其原始对象。Vue中，定义这样一个data数据域中的js对象。打印到控制台，默认输出的是Proxy代理对象。采用选项式api风格。
通过属性值，匹配，得到两个对象数组中，属性值一致的对象
weixin_47239456的博客
06-06 331
js对象数组的匹配
vue怎么拿到一个数组里两个对象的值
07-14
你可以使用Vue的模板语法和计算属性来获取一个数组中两个对象的值。假设你有一个名为`myArray`的数组，其中包含两个对象。你可以使用`v-for`指令循环遍历数组，并在模板中访问对象的属性。 首先，你需要在Vue实例的`data`选项中定义`myArray`数组。然后，你可以在模板中使用`v-for`指令来遍历数组，并在每次迭代中访问对象的属性。 下面是一个示例代码： ```html <template> <div> <ul> <li v-for="item in myArray" :key="item.id"> {{ item.property1 }} - {{ item.property2 }} </li> </ul> </div> </template> <script> export default { data() { return { myArray: [ { id: 1, property1: 'Value 1', property2: 'Value 2' }, { id: 2, property1: 'Value 3', property2: 'Value 4' } ] }; } }; </script> ``` 在上面的代码中，`v-for="item in myArray"`指令将遍历`myArray`数组，并将每个对象赋值给`item`变量。然后，你可以在模板中使用`item.property1`和`item.property2`来访问对象的属性值。 请根据实际情况修改示例代码中的属性名称和数组数据，以适应你的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值