ant-design-vue中table套table数据显示不出来的问题

模板如下:

  :columns="columns"

  :dataSource="data"

  @expand="getDetail"

  :loading="loading"

  @change="changeTable"

  :rowKey="record => record.id"

  :pagination="{total:count,pageSize:pageSize}"

  :locale="{emptyText: '暂无数据'}"

>

  

  


js如下:
getDetail(expanded, record) {

  const param = {

    id: record.id

  };

  if (!expanded) return;

  this.api

    .repayLogDetail(param)

    .then(res => {

      if (res.code === "SUCCESS") {

        const { repayLogDetailItems = [] } = res.data;

        record.innerData = repayLogDetailItems;

      }

    })

    .catch(err => {});

},

展开的时候,给每一个子项都添加了innerData属性,但是子table的数据 依然展示不出来。

原因猜想:

可能是因为父table的数据里面,没有innerData这个属性,所以不管子table如何修改这个innerData属性,都对父table里面的数据产生不了影响,而且子table的数据渲染,需要从父table里面传下来

解决方式:

在父table里面添加对应元素的innerData属性,完美解决

getRecordList(param) {

  this.loading = true;

  this.api

    .repayLog(param)

    .then(res => {

      this.loading = false;

      if (res.code === "SUCCESS") {

        const { repayLogItems = [], count } = res.data;

        repayLogItems.forEach(item => {

          item.innerData = [];

        });

        this.data = repayLogItems;

        this.count = count;

      }

    })

    .catch(err => {});

},

你可能感兴趣的:(ant-design-vue中table套table数据显示不出来的问题)