前端需求-antd+vue实现表格行扩展

1. 行扩展+点击行展开后加载数据

1.1 基础效果

参考官方文档: 表格 Table - Ant Design Vue (antdv.com)

效果图（涉及项目保密，具体内容不显示~）

vue

        <s-table
          ref="table"
          size="default"
          :rowKey="
            (record, index) => {
              return index
            }
          "
          :columns="columns"
          :data="loadData"
          show-pagination="auto"
          :bordered="true"
          @expand="expand"
        >
            
<!-- 行扩展 -->
<p slot="expandedRowRender" slot-scope="record" style="margin: 0">
    <a-list size="small">
        <a-list-item>
            <a-space><a-icon type="eye" /><label>按钮1</label><a-button @click="handleclick">点击</a-button></a-space>
        </a-list-item>
        <a-list-item>
            <a-space><a-icon type="edit" /><label>按钮2</label><a-button @click="handleclick">点击</a-button></a-space>
        </a-list-item>
    </a-list>
</p>

// 点击扩展行之后的回调函数   
expand(expanded, record) {
    console.log(record.productId)
},

1.2 优化

问题：每个表格行点击展开后的数据，是根据表格行的内容异步调用接口得到的，如果把展开行数据的获取放在expand回调函数中，更新完data中的全局数据再用于页面显示，会导致同时展开多行时，展开行的数据变成一样的
解决办法：将展开行的数据获取放到loadData中，直接组装到表格行中，一起进行渲染