背景：我的项目中须要table开展的操作；查看其余文章说只能保留一个开展的内容；实测是能够多个的
要的成果
业务中须要开展行的操作；依照antd官网的写法；并没有实现本人的成果；查github材料后失去了想要的后果；间接上代码吧
html构造代码
# advance-table 是本人2次封装的table组件；理论中间接用a-table就行了<advance-table class="m-t-10" bordered :scroll="{ x:'100%',y: tableY }" :columns="columns_customer_complaint" :data-source="tableData" :loading="loading" :rowKey="(row,index) => row.recordId" :pagination="pagination" @change="handleTableChange" @expand="expandedRowRender" # 这个办法是开展行的回调办法 :expandedRowKeys.sync="expandedRowKeys" # 这个属性很重要；就是用它来管制某行是否开展和收起；分页再次获取数据的时候；也要把它给置空数组；外面的每项对应rowKey返回的recordId > <advance-table slot="expandedRowRender" slot-scope="{text, record}" style="width: 30%;padding: 10px 0;" :columns="columns_customer_complaint_inner" :data-source="record.innerData" # 这个数据起源；做法是往每一项外面都减少一个innerData来用作开展行外面的数据 :pagination="false" :showToolbar="false" > <template slot="dealwithProgress" slot-scope="{text, record}"> {{record.dealwithProgress === 1 ? '进行中' : record.dealwithProgress === 5 ? '已实现' : record.dealwithProgress === 0 ? '待处理' : ''}} </template> </advance-table> </advance-table>JS代码
data(){ return { # ...其余代码 tableData: [], expandedRowKeys: [], }},methods: { // 开展行的回调办法 async expandedRowRender(expanded, record) { const { recordId, rowKey } = record const { data } = await Api.CustomerServiceRecordLogList({ recordId }) // 获取数据后放到外层tableData外面的innerData属性身上 this.$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) } }, async getData(){ // 其余代码 // 从新获取tableData数据后；将开展行id数组置空 this.expandedRowKeys = [] }}