ant design自定义展开折叠查看子项和点击行查看详情

实现思路：通过配置rowSelection，列表项是否可选择来实现。
在这里插入图片描述
页面内容：

 <a-table :dataSource="integrationBonds" :columns="columns" :customRow="customintegrationBondsRow":pagination="{hideOnSinglePage: true}":expandIconColumnIndex="-1":expandIconAsCell="false":hideDefaultSelections="true":rowKey="(record) => record.bondCode":expandedRowKeys="curExpandedRowKeys":row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,}"><template #bodyCell="{ column, record }"><template v-if="column.dataIndex === 'rate'"><DownCircleOutlined class="ml-8 fs-24" @click.stop="handleExpand(record?.bondCode)" /></template></template><!-- 展开内容 --><template #expandedRowRender><div class="detail"><h4>行情</h4><a-row><a-col>60009</a-col><a-col>招商证券</a-col><a-col>239,000,000</a-col><a-col>72</a-col><a-col class="c-primary">2.1%</a-col></a-row></div></template>
</a-table>

交互内容：

// 表格头
columns = [{title: '证券代码', dataIndex: 'bondCode', key: 'bondCode'},{title: '证券名称', dataIndex: 'bondName', key: 'bondName'},{title: '数量（股）', dataIndex: 'amount', key: 'amount', sorter: true},{title: '期限（天）', dataIndex: 'termDays', key: 'termDays', sorter: true},{title: '利率', dataIndex: 'rate', key: 'rate', sorter: true},
];
// 表格数据
integrationBonds = [{amount: '23000000',bondCode:'601099',bondName: "太平洋",myBond: false,rate: 2.1,termDays: 7}
];
// 列表项是否可选择数组
curExpandedRowKeys = []; //点击哪行展开数组(数组里只会存在一个值,具体逻辑在methods的点击事件里.)!!!
selectedRowKeys = [];//列表项是否可选择数组
// 点击行查查详情
customintegrationBondsRow(record) {return {// 行点击事件onClick: (event) => {console.log('行点击事件');},}
}
// 自定义图标展开行事件
handleExpand(bondCode) {this.checkedBondCode = bondCode;this.viewAll = !this.viewAll;// 判断点击的是那一行的数组（数组中只有一个项）if (this.curExpandedRowKeys.length > 0) {let index = this.curExpandedRowKeys.indexOf(bondCode);if (index > -1) {this.curExpandedRowKeys.splice(index, 1);} else {this.curExpandedRowKeys.splice(0, this.curExpandedRowKeys.length);this.curExpandedRowKeys.push(bondCode);}} else {this.curExpandedRowKeys.push(bondCode);}
}
// 选中项发生变化时的回调函数
onSelectChange(selectedRowKeys) {this.selectedRowKeys = selectedRowKeys;
}