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

Posted 前端老实人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);  
      

 这样就完成了,你学费了嘛

最后

如果对您有帮助,希望能给个

以上是关于Ant Design Vue子表格展开只展开一行,其他行折叠#yyds干货盘点#的主要内容,如果未能解决你的问题,请参考以下文章

一次只展开一个表格行 Ant Design React

Ant Design Pro 4.5嵌套表格使用,以及string转图标显示(typescript版)

ant-design-vue:table 指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩-展开所有缩回所有和单项展开缩回并存开发

进阶Ant-Design-Vue你知道table多级表头嵌套展开写法吗?

进阶Ant-Design-Vue你知道table多级表头嵌套展开写法吗?

React开发(173):ant design设置额外的展开行