使用vue3 封装了一种表格形式 数组reduce的高级使用技巧对数据进行筛选分组 震惊！

vue3.2 封装了一个需要的数据表格类型,展示如下：

请求到的数据结构是这样的：

[
            {
                type: 'typeA',
                name: 'name01',
                id: '1'
            },
            {
                type: 'typeB',
                name: 'name02',
                id: '2'
            },
            {
                type: 'typeC',
                name: 'name03',
                id: '3'
            },
        ]

使用了 数组的 reduce 进行处理

let obj = props.data.reduce((prev: any, cur: any) => {
    prev[cur.type] = prev[cur.type] || []
    prev[cur.type].push({ name: cur.name, id: cur.id })
    return prev
}, {})

我自己想的是用 push 方法 筛选数据，一搜进行可以使用 reduce 以前只用 reduce 进行简单的累加 自己悟 真的巧妙！！！

全部代码 copy 直接就可以使用！

<template>
    <table>
        <thead>
            <tr>
                <!-- <th v-for="item in props.title" :key="item">{{ item }}</th> -->
                <th v-for="item in (props.title as string[])" :key="item">{{ item }}</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="(value, key) in obj" :key="key">
                <tr class="title">
                    <td colspan="3">{{ key }}</td>
                </tr>
                <tr v-for="data in (value as any)">
                    <td width="33%"></td>
                    <td width="33%">{{ data.name }}</td>
                    <td width="33%">{{ data.id }}</td>
                </tr>
            </template>
        </tbody>
    </table>
</template>



<script setup lang="ts">
const props = defineProps({
    title: {
        // type: Array<string>,
        type: Array,
        default: ['标题1', '标题2', '标题3',]
    },
    data: {
        type: Array,
        default: [
            {
                type: 'typeA',
                name: 'name01',
                id: '1'
            },
            {
                type: 'typeB',
                name: 'name02',
                id: '2'
            },
            {
                type: 'typeC',
                name: 'name03',
                id: '3'
            },
            {
                type: 'typeA',
                name: 'name04',
                id: '4'
            },
            {
                type: 'typeA',
                name: 'name05',
                id: '5'
            },
            {
                type: 'typeB',
                name: 'name06',
                id: '6'
            },
        ]
    }
})


let obj = props.data.reduce((prev: any, cur: any) => {
    prev[cur.type] = prev[cur.type] || []
    prev[cur.type].push({ name: cur.name, id: cur.id })
    return prev
}, {})


</script>



<style scoped lang="scss">
table {
    color: red;
    width: 100%;
    text-align: center;
    font-size: 14px;
    text-align: center;


    th {
        background-color: skyblue;
        height: 35px;
    }

    td {
        height: 35px;
        border: 1px solid #666;
        line-height: 35px;
    }

    tbody {
        td {
            text-align: left;
        }
    }
}
</style>

总结：简单封装，可以增加更多功能哦