ant design of vue的table嵌套子表格的赋值问题

不知道大家有没有遇到这个需求,表格中嵌套着子表格,但是后端将主表格跟子表格都在一个接口返回来数据,如果是将后端的数据直接赋值给子表格就会出现一个问题,所有的子表格的数据都是一样的;那话不多说,下面开始展示我的代码:

这是html:

 <a-table :loading="{ spinning: loading, tip: '努力加载中' }" :columns="columns" :data-source="data"

        :defaultExpandAllRows="true" :expandIconColumnIndex="-1" :expandIconAsCell="false"

        :pagination="pagination" :scroll="{ x: 1300, y: tableHeight }"  class="components-table-demo-nested"

        @change="changePage"  rowKey="id"   :rowSelection="{   onSelect: onSelect,  onSelectAll: onSelectAll,

        selectedRowKeys: selectedRowKeys,onChange: onSelectChange,}" :expandedRowKeys="expandedRowKeys" :components="components" bordered >

        <span slot="action" slot-scope="text, record">

          <a :style="{ marginRight: '8px' }" @click="handleExpand(record.id)">

            {{ expandedRowKeys.includes(record.id) ? "折叠" : "展开" }}</a>

          <a @click="recordFn(record.id)">流转记录</a>

        </span>       

        <a-table style="width: 80%" id="eb_table" slot="expandedRowRender" slot-scope="record"

        :columns="innerColumns"  :data-source="record.coupletDisposeDetail"   :pagination="false"  rowKey="flowId">

          <span slot="action" slot-scope="text, record" class="table-operation">

            <a @click="checkFn(record)">查看</a>

          </span>

        </a-table>

      </a-table>

这是封装请求

 getPageDatas() {

      this.loading = true;

      const that = this;

      this.$ajax.postReviewQuery(this.query).then((res) => {

        if (res.code == 0) {

          const arr = res.data.records;

          that.data = arr;

          that.pagination.total = res.data.total && parseInt(res.data.total);

          that.data.forEach((e) => {

            e.coupletMoney = changeAmount(e.coupletMoney);

            e.coupletDisposeDetail.forEach(e=>{ e.borrowMoney=changeAmount(e.borrowMoney)

              e.loanMoney=changeAmount(e.loanMoney)

            })

          });

        }

        this.loading = false;

      });

    },

如有其他更为简便的方法,欢迎指教,谢谢大家

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值