需求：在父表格中嵌套子表格，當點擊展開某一行時，有展開的關閉當前展開行。使用a-table中的expandedRowKeys 屬性和expand 方法。鏈接：Ant Design Vue

一、屬性說明：

? ?expandedRowKeys：這個主要是控制展開某行，它是一個數組形式，

? ?expand：這個可以接受兩個參數，一個是是否展開，另一個是當前行的數據Function(expanded, record)。

二、示例代碼：

   // 添加相應的屬性和方法，這邊自定義數據  我以官網為例  :expandedRowKeys="expandedRowKeys"   目的是使expandedRowKeys只有最新點開子表單的key<template><a-table :columns="columns" :data-source="data" :expandedRowKeys="expandedRowKeys" @expand="expand" class="components-table-demo-nested"><template #operation><a>Publish</a></template><template #expandedRowRender><a-table :columns="innerColumns" :data-source="innerData" :pagination="false"><template #status><span><a-badge status="success" />Finished</span></template><template #operation><span class="table-operation"><a>Pause</a><a>Stop</a><a-dropdown><template #overlay><a-menu><a-menu-item>Action 1</a-menu-item><a-menu-item>Action 2</a-menu-item></a-menu></template><a>More<down-outlined /></a></a-dropdown></span></template></a-table></template></a-table>
</template>
<script lang="ts">
import { DownOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';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', slots: { customRender: 'operation' } },
];interface DataItem {key: number;name: string;platform: string;version: string;upgradeNum: number;creator: string;createdAt: string;
}const data: DataItem[] = [];
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', slots: { customRender: 'status' } },{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },{title: 'Action',dataIndex: 'operation',key: 'operation',slots: { customRender: 'operation' },},
];interface innerDataItem {key: number;date: string;name: string;upgradeNum: string;
}const innerData: innerDataItem[] = [];
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',});
}
const expandedRowKeys = ref([])
const expand = (expanded,record) => {expandedRowKeys.value = []// 只展開一行if (expanded) {//進這個判斷說明當前已經有展開的了//返回某個指定的字符串值在字符串中首次出現的位置，下標為0let index = expandedRowKeys.value.indexOf(record.id)if (index > -1) {//如果出現則截取這個id,1d到1相當于0，針對重復點擊一個expandedRowKeys.value.splice(index, 1)} else {//如果沒出現則截取所有id,添加點擊id，0到1，針對已經有一個展開，點另一個會進入判斷expandedRowKeys.value.splice(0, expandedRowKeys.value.length)expandedRowKeys.value.push(record.id)}} else {//數組長度小于0，說明都沒展開，第一次點擊，id添加到數組，數組有誰的id誰就展開expandedRowKeys.value.push(record.id)}}
export default defineComponent({components: {DownOutlined,},setup() {return {data,columns,innerColumns,innerData,expandedRowKeys,};},
});
</script>