Iview dynamically adds the columns, of the table to cause the browser to jam, how to solve it?

problem description

the columns of each table are stored in the database, and the column items are generated dynamically every time the table is generated, and the column items can be customized, but after getting the data of the columns from the server, push to columns, causes the browser to freeze infinitely. How to solve this problem.

related codes

<div id="vue">
    <i-table
        border
        size="small"
        :columns="columns"
        :data="data">
    </i-table>
</div>
<script>
    new Vue({
        el: "-sharpvue",
        data: {
            post_id: 1,
            data: [],
            columns: []
        },
        created: function () {
            self = this;
        },
        mounted(){
           jQuery.post("/get_columus", {
               post_id: this.post_id
           }, function (res) {
               res.columns.map(item => {
                    console.log(item)
                    console.log(typeof item)
                    // self.columns.push(item)
               });

               self.data = res.data;
           })
        },
    })
</script>

where the res returned by the server is as follows:

[{...}{...}{...}...{...}]

after console.log (typeof item), it is also displayed for object,. After printing console.log (item), it is {.}

.

but self.columns.push (item) directly causes the browser to jam and vue reports an error. Is there something wrong with this?

the following is the array returned by the server:

clipboard.png

Jan.15,2022

header column you only need to set key and title properties. If you use the header returned from the backstage, you need a Filter header, such as

.
res.columns.map((data) => {
  self.columns.push({
     title:data.title,
     key:data.key
  })
})

but I have a question. Isn't the header usually defined by the front end?


first remove your columns and: data, and then what do you mean by self.data = res.data; at the end of your loop? if data is overwritten, then this self.columns.push (item) doesn't make any sense.

this is the only problem you can see right now-- it's not that the browser is jammed, but the blank page caused by vue error

.
Menu