vue點(diǎn)擊展開tr隱藏內(nèi)容？

先上個(gè)效果圖，代碼貼在后面了~vue還不是用的特別熟，還望大神給個(gè)思路或者方向~

Jq模擬寫出的效果，點(diǎn)擊當(dāng)前tr的最后一個(gè)td展開隱藏的tr的內(nèi)容。隱藏tr的內(nèi)容是備注未能顯示完全的部分。再次點(diǎn)擊tr最后一個(gè)td則收起

<tbody>
              <tr class="hap_table_tr" v-for="(item,index) in hank">
                <td class="hap_table_bank">
                  <p>{{ item.name }}</p>
                </td>
                <td>
                  <p>{{ item.process }}</p>
                </td>
                <td>
                  <time>{{ item.date }}</time>
                </td>
                <td class="hap_table_notes" @click="changeContent(index)">
                  <p class="hap_table_note">{{ item.remakes }}</p>
                  <i class="hap_table_drop1"></i>
                </td>
              </tr>
            </tbody>

hank:[
              {name:'工行',process:'不準(zhǔn)入',date:'208-05-23',remakes:'備注備注備9'},
              {name:'建行',process:'談費(fèi)率',date:'208-05-23',remakes:'一二三四五六七'},
              {name:'農(nóng)行',process:'生產(chǎn)測(cè)試',date:'208-05-23',remakes:'備注備注不在不在不在'},
              {name:'商行',process:'協(xié)議流轉(zhuǎn)',date:'208-05-23',remakes:'備注備注不在不在不在'},
              {name:'央行',process:'系統(tǒng)測(cè)試',date:'208-05-23',remakes:'備注備注不在不在不在'},
              {name:'中信',process:'不準(zhǔn)入',date:'208-05-23',remakes:'備注備注不在不在不在'},
              {name:'浦發(fā)',process:'不準(zhǔn)入',date:'208-05-23',remakes:'備注備注不在不在不在'},
              {name:'交行',process:'不準(zhǔn)入',date:'208-05-23',remakes:'備注備注不在不在不在'},
              {name:'交行',process:'不準(zhǔn)入',date:'208-05-23',remakes:'備注備注不在不在不在'},
              {name:'交行',process:'不準(zhǔn)入',date:'208-05-23',remakes:'備注備注不在不在不在'},
              {name:'交行',process:'不準(zhǔn)入',date:'208-05-23',remakes:'備注備注不在不在不在'},
              {name:'交行',process:'不準(zhǔn)入',date:'208-05-23',remakes:'備注備注不在不在不在'},
            ],