Antd VUE中table子表同时只展开一个子信息的说明
前言
在网上搜索了很久,很多方法都不太好用,不过经过整理发现,有一个方式是最简单的,比网路上那些copy粘贴的千篇一律的错来说,其实真正的使用方式很简单
想必大家要实现的效果都是上图这样的
<template>
<a-table :columns="columns" :data-source="data" class="components-table-demo-nested">
<a slot="operation" slot-scope="text">Publish</a>
<a-table
slot="expandedRowRender"
slot-scope="text"
:columns="innerColumns"
:data-source="innerData"
:pagination="false"
>
<span slot="status" slot-scope="text"> <a-badge status="success" />Finished </span>
<span slot="operation" slot-scope="text" class="table-operation">
<a>Pause</a>
<a>Stop</a>
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item>
Action 1
</a-menu-item>
<a-menu-item>
Action 2
</a-menu-item>
</a-menu>
<a> More <a-icon type="down" /> </a>
</a-dropdown>
</span>
</a-table>
</a-table>
</template>
<script>
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', scopedSlots: { customRender: 'operation' } },
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
const innerColumns = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Status', key: 'state', scopedSlots: { customRender: 'status' } },
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
scopedSlots: { customRender: 'operation' },
},
];
const innerData = [];
for (let i = 0; i < 3; ++i) {
innerData.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
export default {
data() {
return {
data,
columns,
innerColumns,
innerData,
};
},
};
</script>
@expand 事件中可以监听到当前子项展开事件
回调参数 Function(expanded, record)
当expanded为true时表示展开了,并且能通过record获取ID等信息
:expandedRowKeys="expandedRowKeys"
可以在return data中定义 expandedRowKeys=[]
在每次展开时将record.id放入其中,如果想关闭其他展开的子项,那么只需要在放record.id前初始化一下expandedRowKeys的值即可
大致方式如下
this.expandedRowKeys=[] this.expandedRowKeys.push(record.id)
真的就是这么简单
本文来自博客园,作者:Jacob·雅各布,转载请注明原文链接:https://www.cnblogs.com/JacobX/p/16066903.html