原

vue3 ts 方法传参,any使用。vue3 ts reactive 使用类型，定义具体类型。vue3 ts实现分组, 多字段作为key分组，二级分组，多级分组，子级分组

1067人阅读 2024/4/29 11:52 总访问：662818 评论：0 收藏：0 手机

分类: 前端

[TOC]

### vue3 ts 方法传参,any使用

方法1：
```
// 循环解析
dataListToAppend.forEach((element: any) => {
    state.tasksPlanList.push(element)
});
```
方法2:
```
const deleteRow = (index: number, allotTaskID: number) => {
}
```
方法3:
```
const saveTaskPlan = (tasksPlanList: any) => {
}
```
方法4:
```
const state = reactive({
    taskCATList: [] as any[],
    }
})
```
5：父子组件传参中关于any的使用
```
const props = defineProps({
    schoolId: String,
    taskIds: {
        type: [] as any,
        default:[]
    }
})
```

### vue3 ts reactive 使用类型，定义类型

##### 写法一

定义类型：
```
interface keyFocusItem {
    teacherName: string;
    className: string;
    courseName: string;
    describe: string;
    classID: string;
    type: string;
}
```
初始化：
```
const state = reactive({
    // 初始化，并且指定了类型
    warring_exception_miniProgram:new Array<keyFocusItem>()
})
```

##### 写法二

定义一个类型：
```
// 根据班级id与班级名称分组之后的类型
interface GroupedItem {  
    className: string;  
    items: keyFocusItem[];  
}  
```
在vue3 中指定类型：
```
const state = reactive({
    warring_exception_miniProgram: new Array<keyFocusItem>(),
    // 给classGroupedItems指定类型
    classGroupedItems:{} as Record<string, GroupedItem>
})
```

##### 写法三

还可以考虑这种写法：
```
const completeList = ref<Array<any>>([])
```


### vue3 ts实现分组

#### 单字段分组，根据classId分组
定义类型，与方法定义：
```
const state = reactive({
    // 初始化，并且指定了类型
    warring_exception_miniProgram:new Array<keyFocusItem>()
})

interface keyFocusItem {
    teacherName: string;
    className: string;
    courseName: string;
    describe: string;
    classID: string;
    type: string;
}

const groupWay =
{
    // 根据班级id分组
    groupByClassId(people: keyFocusItem[]): { [classID: number]: keyFocusItem[] } {
        return people.reduce((groups, person) => {
            // 如果当前班级组还不存在，则初始化一个空数组  
            if (!groups[person.classID]) {
                groups[person.classID] = [];
            }
            // 将人添加到相应的班级组  
            groups[person.classID].push(person);
            // 返回更新后的分组对象  
            return groups;
        }, {} as { [classID: number]: keyFocusItem[] }); // 使用类型断言来明确返回值的类型  
    }
}
```
使用：
```
console.log("看看分组之后的数据", groupWay.groupByClassId(warring_exception_miniProgram))
```

#### 多字段作为key分组，根据classId与className分组，而且分组之后可以方便取出来className
示例代码如下：
```
interface KeyFocusItem {  
    teacherName: string;  
    className: string;  
    courseName: string;  
    describe: string;  
    classID: string;  
    type: string;  
}  
  
interface GroupedItem {  
    className: string;  
    items: KeyFocusItem[];  
}  
  
function groupByClassIDAndClassName(items: KeyFocusItem[]): Record<string, GroupedItem> {  
    return items.reduce((groups, item) => {  
        // 组合 classID 和 className 作为分组键  
        const key = `${item.classID}_${item.className}`;  
        // 如果当前组还不存在，则初始化为一个空数组  
        if (!groups[key]) {  
            groups[key] = {  
                className: item.className, // 存储 className  
                items: [] // 存储该组的所有 items  
            };  
        }  
        // 将当前项添加到对应的组中  
        groups[key].items.push(item);  
        // 返回更新后的分组对象  
        return groups;  
    }, {}); // 初始分组对象为空对象  
}  
  
// 示例使用  
const keyFocusItems: KeyFocusItem[] = [  
    // ... 这里是你的 keyFocusItem 数组  
];  
  
const groupedItems = groupByClassIDAndClassName(keyFocusItems);  
  
// 输出分组结果（仅用于演示）  
for (const [key, value] of Object.entries(groupedItems)) {  
    console.log(`分组Group Key: ${key}`);  
    console.log(`分组Class Name: ${value.className}`); // 直接访问 className  
    console.log(value.items); // 访问该组的所有 items  
    console.log('---');  
}
```

#### 多字段作为key分组之后在vue3中解析

##### 核心的ts逻辑：
```
const state = reactive({
	// ....其他类型
    warring_exception_miniProgram: new Array<keyFocusItem>(),
    // 给classGroupedItems指定类型
    classGroupedItems:{} as Record<string, GroupedItem>
})

interface keyFocusItem {
    teacherName: string;
    className: string;
    courseName: string;
    describe: string;
    classID: string;
    type: string;
}

// 根据班级id与班级名称分组之后的类型
interface GroupedItem {  
    className: string;  
    items: keyFocusItem[];  
}  

// 分组函数
const groupWay =
{
    // 根据班级id与班级名称分组
    groupByClassIDAndClassName(items: keyFocusItem[]): Record<string, GroupedItem> {
        return items.reduce((groups, item) => {
            // 组合 classID 和 className 作为分组键  
            const key = `${item.classID}_${item.className}`;
            // 如果当前组还不存在，则初始化为一个空数组  
            if (!groups[key]) {
                groups[key] = {
                    className: item.className, // 存储 className  
                    items: [] // 存储该组的所有 items  
                };
            }
            // 将当前项添加到对应的组中  
            groups[key].items.push(item);
            // 返回更新后的分组对象  
            return groups;
        }, {}); // 初始分组对象为空对象  
    }
}

// 添加数据的内容，换成自己的具体逻辑
state.warring_exception_miniProgram.push({
    teacherName: prodElement.teacherName, className: className, courseName: lessonName,
    describe: prodElement.prodName + "课程项目已结束,有" + prodElement.waiteAuditedCount + "个待审批项",
    classID: prodElement.classID,
    type: "exception"
});

console.log("看看处理的warring_exception_miniProgram数据", state.warring_exception_miniProgram);
let classGroupedItems = groupWay.groupByClassIDAndClassName(state.warring_exception_miniProgram)
console.log("看看分组之后的数据", classGroupedItems);
state.classGroupedItems = classGroupedItems

// 测试循环输出分组之后的内容
for (const [key, value] of Object.entries(classGroupedItems)) {  
    console.log(`分组key Group Key: ${key}`);  
    console.log(`分组Class Name: ${value.className}`); // 直接访问 className  
    console.log(value.items); // 访问该组的所有 items  
    console.log(value.items.length); // items的长度 
    console.log('---');  
}
```

##### 在vue3页面中去解析数据：
```
<view class="event-list">

    <uni-collapse accordion v-model="state.curOpen">
        <uni-collapse-item :class="{ 'waring': value.items.length >= 5 }" v-for="[key, value] in Object.entries(state.classGroupedItems)"
            :key="key" class="c-item" title-border="none" :border="false">
            <template v-slot:title>
                <view class="item-title">{{value.className}} 重点关注问题{{value.items.length}}个</view>
            </template>
            <view class="content">
                <view class="e-list-box">
                    <view class="e-item" v-for="(ev, ei) in value.items" :key="ei + 'e-item'"
                        :style="{ backgroundImage: `url(${CssImgPath}/imgs/waring.png)` }">
                        <view class="e-course">{{ ei + 1 }}、{{ev.courseName}}({{ev.teacherName}}) </view>
                        <view class="e-c-event">{{ev.describe}}</view>
                    </view>
                </view>
            </view>
        </uni-collapse-item>
    </uni-collapse>

</view>
```

##### 解析出来的效果图
![](https://img.tnblog.net/arcimg/notebook/7ae2bfd095cf4b7daaee69e7cd2fdaa0.png)


#### 二级分组，多级分组，子级分组
就是分组里边还需要分组的情况，直接贴代码。这里的例子是先通过不同接口出来的数据，合并成一个新的数据后，先根据班级分组，然后在根据课程分组，所以就需要处理两级分组的情况。


```
watchPostEffect(() => {

    state.stid = prop.curSchool.stid

    return Promise.all([
        ac.getKeyFocusLabRoomTeacher(),
        ac.getKeyFocusEvalTeacher(),
    ]).then((res: any) => {
        console.log("看看合并出来的数据。。。。。", state.keyFocusItemList)

        let classGroupData = groupWay.groupByClassID(state.keyFocusItemList)
        console.log("看看根据班级分组后的数据。。。。。", classGroupData)

        // 处理一下子级的分组,根据课程分组之后的数据
        for(let item in classGroupData)
        {
            classGroupData[item].courseGroups = groupWay.groupByCourseID(classGroupData[item].items)
        }

        console.log("看看二级分组之后的数据",classGroupData)
    })

})

// 根据班级id与班级名称分组之后的类型
interface GroupedItem {
    className: string;
    items: keyFocusItem[];
    // 根据课程分组之后存储的数据
    courseGroups:Record<string, CourseGroupedItem>;
}

// 根据课程分组之后的数据
interface CourseGroupedItem {
    courseName: string;
    items: keyFocusItem[];
}

interface keyFocusItem {
    classID: string;
    className: string;
    lessionId: string;
    courseName: string;
    describe: string;
    // 类型 1:评估，2：实验，3：产教 （为了方便后续排序弄成一个数字）
    type: string;
    goalAchievementRate: number;
}


// 分组函数
const groupWay =
{
    // 根据班级id分组
    groupByClassID(items: keyFocusItem[]): Record<string, GroupedItem> {
        return items.reduce((groups, item) => {
            const key = item.classID;
            if (!groups[key]) {
                groups[key] = {
                    className: item.className,
                    items: []
                };
            }
            groups[key].items.push(item);
            return groups;
        }, {});
    },
    // 根据课程id分组
    groupByCourseID(items: keyFocusItem[]): Record<string, CourseGroupedItem> {
        return items.reduce((groups, item) => {
            const key = item.lessionId;
            if (!groups[key]) {
                groups[key] = {
                    courseName: item.courseName,
                    items: []
                };
            }
            groups[key].items.push(item);
            return groups;
        }, {});
    },
}


const ac = {
    getKeyFocusLabRoomTeacher: function () {
        return Http.get('/labroom/api/xx/GetKeyFocusTeacher', { StdetailID: state.stid, IncludeAll: false }).then((res: any) => {
            console.log("实验老师重点关注数据：", res)
            state.teachingDynamics = res.data

            for (let index = 0; index < res.data.length; index++) {
                const element = res.data[index];

                for (let courseIndex = 0; courseIndex < element.keyFocusTeacherOutPuts.length; courseIndex++) {
                    const courseItem = element.keyFocusTeacherOutPuts[courseIndex];

                    state.keyFocusItemList.push({
                        classID: element.classID,
                        className: element.className,
                        lessionId: courseItem.lessonID,
                        courseName: courseItem.courseName,
                        describe: courseItem.describe,
                        type: "1",
                        goalAchievementRate: courseItem.mustDoGoalAchievementRate
                    })
                }
            }
        })
    },
    getKeyFocusEvalTeacher: function () {
        return Http.get('/evaluation/api/yy/GetKeyFocusTeacher', { STID: state.stid }).then((res: any) => {
            console.log("评估老师重点关注数据：", res)

            for (let index = 0; index < res.data.length; index++) {
                const element = res.data[index];

                for (let courseIndex = 0; courseIndex < element.childList.length; courseIndex++) {
                    const courseItem = element.childList[courseIndex];

                    state.keyFocusItemList.push({
                        classID: element.classID,
                        className: element.className,
                        lessionId: "fc95c4d9c1e54a198ef2173f584fa9f8",
                        // lessionId:courseItem.lessonID,
                        courseName: courseItem.lessonName,
                        describe: courseItem.remark,
                        type: "0",
                        goalAchievementRate: courseItem.planCompletePr
                    })
                }
            }

        })
    }
}
```




### 更多使用可以参考阿里云盘的实例存储

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 6篇

ORM 16篇

前端 54篇

随笔 13篇

移动开发 6篇

数据库 7篇

英语 3篇

rabbitmq 1篇

.net core 6篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

vue3 ts 方法传参,any使用。vue3 ts reactive 使用类型，定义具体类型。vue3 ts实现分组, 多字段作为key分组，二级分组，多级分组，子级分组

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}