Iview-Table 下拉详情展示手风琴模式

万万没有想到,自从开始实习后养成了做笔记的习惯,把自己平时的学习都记录成了一个文档。感觉还不错呢。

Iview-Table 下拉详情展示手风琴模式

于是很久没有更新了,想着还是把笔记里有用的东西慢慢整理放上来,学习共享。

今天先写一个Iview—table里,当表格内容较多不能一次性完全展示时一般我们会涉及使用下拉展示的方式:

Iview-Table 下拉详情展示手风琴模式

目的是想实现:每次只能展示一个下拉的手风琴模式。

代码先放上来:

(1)首先定义Iview-table下拉的模式(其中vResDetail为渲染的下拉展示的内容,props为需要传递给vResDetail的参数)

Iview-Table 下拉详情展示手风琴模式

(2)首次获得数据时,给table的数据data添加一个参数_expanded为false,默认关闭状态。

Iview-Table 下拉详情展示手风琴模式

(2)定义一个展开或收起时触发的函数onExpand

Iview-Table 下拉详情展示手风琴模式

(3)定义onExpand函数

onExpand(row, status){
                if(status){
                    this.table_data.map((item, index)=>{
                        //sequence是为每条数据定义的id
                        if(item.sequence == row.sequence){
   
                            item._expanded = true;   //展开选中的行

                            //detail是自己另外定义的函数接口,获取选中行需要展开的数据
                            this.detail(row.vRes_apply_id, row.res_type, row.apply_type);      
                      
                    }
                else item._expanded = false;   //其他行关闭
                    return item;
                });
                }
            },