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

电脑版发表于：2024/4/29 11:52

[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
                    })
                }
            }

        })
    }
}
```




### 更多使用可以参考阿里云盘的实例存储

TeachingNote

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

{{item.title}}