2024年前端最新Ant Design Vue子表格展开只展开一行，其他行折叠，2024年不想被公司优化

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

第一步：

直接抄我箭头指的那三行即可

:row-key=“(record) => record.id”       这个主要用于获取id

@expand=“zi”    这个为了得到展开行的数据

:expandedRowKeys=“expandedRowKeys”   这个是负责控制行的展开与关闭，（这个变量是以数组的形式展示，谁的id在数组里就显示谁）

第二步

const expandedRowKeys = ref([]);

const zi = (expanded, record) => {

// 只展开一行

if (expandedRowKeys.value.length > 0) { //进这个判断说明当前已经有展开的了

//返回某个指定的字符串值在字符串中首次出现的位置，下标为0

let index = expandedRowKeys.value.indexOf(record.id);

if (index > -1) { //如果出现则截取这个id,1d到1相当于0，针对重复点击一个

expandedRowKeys.value.splice(index, 1);

} else {

//如果没出现则截取所有id,添加点击id，0到1，针对已经有一个展开，点另一个会进入判断

expandedRowKeys.value.splice(0, expandedRowKeys.value.length);

expandedRowKeys.value.push(record.id);

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包