因为我的子列表数据都是用的一个变量,所以需要折叠其他的,要不然多个表格展开后,数据渲染都是一样的
下列列表是只可以展开一列的:
直接抄我箭头指的那三行即可
: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);
}
}
这样就完成了,你学费了嘛
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_52691965/article/details/120494451
内容来源于网络,如有侵权,请联系作者删除!