背景：项目中需要进行扩表操作；根据其他文章，只能保留一个扩展内容；实测可以是业务中需要扩展的多个操作；按照antd官网的写法；它没有实现自己的效果；查看github信息后，得到了想要的结果；直接上传代码。html结构代码#advance-table是我自己封装了两次的表格组件；实际上，直接使用a-tablerow.recordId":pagination="pagination"@change="handleTableChange"@expand="expandedRowRender"#该方法为展开的回调方法rows:expandedRowKeys.sync="expandedRowKeys"#这个属性很重要；只是用它来控制一行是展开还是折叠；当分页再次获取数据时；它也应该是空数组；其中的每一项对应于rowKey返回的recordId>{{record.dealwithProgress===1？“进行中”：record.dealwithProgress===5?'已完成'：record.dealwithProgress===0?'Pending':''}}JS代码data(){return{#...其他代码tableData:[],expandedRowKeys:[],}},methods:{//扩展行的回调方法asyncexpandedRowRender(expanded,record){const{recordId,rowKey}=recordconst{data}=awaitApi.CustomerServiceRecordLogList({recordId})//拿到数据后放到innerDataattributeinoutertableDatathis.$set(this.tableData[rowKey],'innerData',data)//操作当前行是否展开；根据里面是否有`recordId`进行逻辑运算if(this.expandedRowKeys.includes(recordId)){this.expandedRowKeys.splice(this.expandedRowKeys.findIndex(f=>f===recordId),1)}else{this.expandedRowKeys.push(recordId)}},asyncgetData(){//其他代码//重新获取tableData数据后；清空rowid数组this.expandedRowKeys=[]}}达到效果
