首页
视频
资源
登录
原
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}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
TeachingNote
这一生多幸运赶上过你.
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
38篇
后端
6篇
ORM
16篇
前端
54篇
随笔
13篇
移动开发
6篇
数据库
7篇
英语
3篇
rabbitmq
1篇
.net core
6篇
unity
1篇
k8s
1篇
云服务
1篇
DDD
1篇
网络
1篇
更多
mysql
1篇
python
2篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术