vue表格嵌套内容展开收起

最新推荐文章于 2024-08-19 09:56:27 发布

小栗栗子

最新推荐文章于 2024-08-19 09:56:27 发布

阅读量6.2k

点赞数

分类专栏：前端展示文章标签： vue

本文链接：https://blog.csdn.net/u014715787/article/details/83186572

版权

前端展示专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<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做内容的展开收起。