vue表格嵌套内容展开收起_vue实现表格嵌套收缩展开

<table class="tab-left table tab-zn">
                                    <thead>
                                    <tr>
                                        <th>在线状态</th>
                                        <th>名称</th>
                                        <th>管理地址</th>
                                        <th>显示</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <template v-for="(item) in bfData">
                                        <tr class="pointer"
                                            @click="selectCj(item)">
                                            <td><span class="status sta-green"
                                                      :class="[item.status?'sta-green':'sta-gray']"></span></td>
                                            <td v-html="item.task_cycle"></td>
                                            <td v-html="item.task_detial"></td>
                                            <td>
                                                <button @click="item.task_detial=!item.task_detial">bbb</button>
                                            </td>
                                        </tr>
                                        <tr v-if="item.task_detial">
                                            <td colspan="4">
                                                <div>123</div>
                                            </td>
                                        </tr>
                                    </template>
                                    </tbody>
                                </table>

主要用于template进行嵌套两个<tr>一个tr用于正常表格，另个tr做内容的展开收起。