vue表格巢狀內容展開收起
阿新 • • 發佈:2018-12-16
<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做內容的展開收起。