vue - antd UI table表格展开行+展开多行共存

背景：项目中需要table展开的操作；查看其他文章说只能保留一个展开的内容；实测是可以多个的

要的效果

业务中需要展开行的操作；按照antd官网的写法；并没有实现自己的效果；查github资料后得到了想要的结果；直接上代码吧

html结构代码

# advance-table 是自己2次封装的table组件；实际中直接用a-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 = []
    }
}

实现效果