vue点击展开tr隐藏内容？

Question

先上个效果图，代码贴在后面了~vue还不是用的特别熟，还望大神给个思路或者方向~

Jq模拟写出的效果，点击当前tr的最后一个td展开隐藏的tr的内容。隐藏tr的内容是备注未能显示完全的部分。再次点击tr最后一个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:'不准入',date:'208-05-23',remakes:'备注备注备9'},
              {name:'建行',process:'谈费率',date:'208-05-23',remakes:'一二三四五六七'},
              {name:'农行',process:'生产测试',date:'208-05-23',remakes:'备注备注不在不在不在'},
              {name:'商行',process:'协议流转',date:'208-05-23',remakes:'备注备注不在不在不在'},
              {name:'央行',process:'系统测试',date:'208-05-23',remakes:'备注备注不在不在不在'},
              {name:'中信',process:'不准入',date:'208-05-23',remakes:'备注备注不在不在不在'},
              {name:'浦发',process:'不准入',date:'208-05-23',remakes:'备注备注不在不在不在'},
              {name:'交行',process:'不准入',date:'208-05-23',remakes:'备注备注不在不在不在'},
              {name:'交行',process:'不准入',date:'208-05-23',remakes:'备注备注不在不在不在'},
              {name:'交行',process:'不准入',date:'208-05-23',remakes:'备注备注不在不在不在'},
              {name:'交行',process:'不准入',date:'208-05-23',remakes:'备注备注不在不在不在'},
              {name:'交行',process:'不准入',date:'208-05-23',remakes:'备注备注不在不在不在'},
            ],

Answer 1

你可以用elementui的表格组件嘛！elementui

展开行 type="expand"
参考链接描述
这个是来设置右面的按钮，如果你的 remakes 没有数据就不会显示这个 有数据就会显示
这是我做的项目中

Answer 2

这没什么难实现的呀，把两行 tr 当做一个 component 包到一起就可以了，隐藏逻辑写到 component 中。不过可能需要注意的是，table 标签中包含什么标签是有限制的，不过如果使用 Vue 的模板是不存在这个问题的。