Ant Design Vue子表格展开只展开一行，其他行折叠#yyds干货盘点# _Design

志不强者智不达，言不信者行不果。这篇文章主要讲述Ant Design Vue子表格展开只展开一行，其他行折叠#yyds干货盘点#相关的知识，希望能为你提供帮助。
背景
因为我的子列表数据都是用的一个变量，所以需要折叠其他的，要不然多个表格展开后，数据渲染都是一样的
【Ant Design Vue子表格展开只展开一行，其他行折叠#yyds干货盘点#】下列列表是只可以展开一列的：

文章图片
?
第一步：
直接抄我箭头指的那三行即可

文章图片

文章图片
?

: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); else //数组长度小于0，说明都没展开，第一次点击，id添加到数组，数组有谁的id谁就展开 expandedRowKeys.value.push(record.id);

这样就完成了，你学费了嘛
最后
如果对您有帮助，希望能给个