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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Ant Design Vue 表格支持三层可展开,可以通过 `expandable` 属性来设置。具体实现步骤如下: 1. 在表格数据源中添加 `children` 字段来存储子节点数据。 2. 在表格列中添加 `expandable` 属性,用于设置展开行的相关配置,包括展开图标、收起图标、是否默认展开等。 3. 使用 `scoped slot` 来自定义展开行的内容。 下面是一个示例代码: ```vue <template> <a-table :columns="columns" :data-source="dataSource" :expandable="expandable"> <template #expanded-row="{record}"> <a-table :columns="subColumns" :data-source="record.children" row-key="id"></a-table> </template> </a-table> </template> <script> export default { data() { return { dataSource: [ { id: 1, name: 'parent1', children: [ { id: 11, name: 'child1' }, { id: 12, name: 'child2' } ] }, { id: 2, name: 'parent2', children: [ { id: 21, name: 'child3', children: [ { id: 211, name: 'grandchild1' } ] } ] } ], columns: [ { title: 'ID', dataIndex: 'id' }, { title: 'Name', dataIndex: 'name' } ], subColumns: [ { title: 'ID', dataIndex: 'id' }, { title: 'Name', dataIndex: 'name' } ], expandable: { expandIcon: ({ expanded, onExpand, record }) => { if (!record.children) { return null } if (expanded) { return <a-icon type="minus-square" onClick={e => onExpand(record, e)} /> } else { return <a-icon type="plus-square" onClick={e => onExpand(record, e)} /> } }, rowExpandable: record => !!record.children, defaultExpandAllRows: true } } } } </script> ``` 在上面的示例代码中,我们定义了一个表格,其中包含两个父节点和三个子节点。每个父节点下面都有若干个子节点,而某些子节点下面还有更深层的子节点。 我们使用了嵌套表格的方式来展示三层数据,使用了 `scoped slot` 来自定义展开行的内容。同时,我们也设置了展开行的相关配置,包括展开图标、收起图标、是否默认展开等。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值