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>60009a-col>
                <a-col>招商证券a-col>
                <a-col>239,000,000a-col>
                <a-col>72a-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;
}