Iview-Table 下拉詳情展示手風琴模式

萬萬沒有想到，自從開始實習後養成了做筆記的習慣，把自己平時的學習都記錄成了一個文檔。感覺還不錯呢。

於是很久沒有更新了，想着還是把筆記裏有用的東西慢慢整理放上來，學習共享。

今天先寫一個Iview—table裏，當表格內容較多不能一次性完全展示時一般我們會涉及使用下拉展示的方式：

目的是想實現：每次只能展示一個下拉的手風琴模式。

代碼先放上來：

（1）首先定義Iview-table下拉的模式（其中vResDetail爲渲染的下拉展示的內容，props爲需要傳遞給vResDetail的參數）

（2）首次獲得數據時，給table的數據data添加一個參數_expanded爲false，默認關閉狀態。

（2）定義一個展開或收起時觸發的函數onExpand

（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;
                });
                }
            },