1. 程式人生 > >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做內容的展開收起。