vue2如何在异步请求处理后再渲染a-table组件

Question

前端框架：ant design vue @1.6.2
需求：使用a-table组件时，表格的 columns 和 data 是通过异步请求遍历处理后才生成的，但是在页面加载的时候，columns 已经加载上了，如何能够重新渲染a-table组件，或者在异步请求处理后再渲染a-table组件
前端部分代码：

<template>
    <div>
.....省略
 <a-col v-for="(p, pindex) in f.part" :span="8" :key="pindex">
    <div class='part' @click="showModal1(p.title)">{{ p.title }}</div>
    <div style="padding:5px">
       <a-table  :columns="columns[p]" :data-source="table_data[p]" :bordered="true" size="middle" :pagination="false"> </a-table>
    </div>
    <div :id='echarts(p.echarts)' style="height: 10rem; width: 99%"> </div>
 </a-col>
.....省略
    </div>
</template>
<script>
.....省略
const columns = [];
const table_data= [];

export default {
 data() {
        return {
            data: [],
            dataList: [],

            table_data,
            columns,
        }
    },
mounted() {
        this.GETVAL()
    },
methods: {
 GETVAL() {
            axios({
                url: 'XXXXXXXX',
                method: 'post',
            }).then((res) => {
                console.log('echarts', res)
                if (res.errCode > 0) {
                    this.$notification['error']({
                        message: '错误信息',
                        description: res.errMsg,
                    })
                    return
                }
                var alen = res.rate
                for (var i = 0; i < alen.length; i++) {
                    this.columns.push([{
                        dataIndex: 'name',
                        key: 'name',
                    },])
                    for (let j = 0; j < alen[i].data.riqi.length; j++) {
                        if (j < 5) {
                            this.columns[i].push(
                                {
                                    title: alen[i].data.riqi[j],
                                    dataIndex: alen[i].data.riqi[j],
                                    key: alen[i].data.riqi[j],
                                },
                            )
                        }
                    }
                    console.log(this.columns[i], 'this.columns[i]');
                }
            })
        },

    },
}
</script>

Answer 1

已解决，很尴尬的原因，:columns="columns[p]"中我用的是[p]，实际上，我上面写的是<a-col v-for="(p, pindex) in f.part" :span="8" :key="pindex">，应该是用 pindex，改成:columns="columns[pindex]"就好了