The data obtained from the interface cannot be rendered to the page.

  <el-table :data="props.row.children"  row-class-name="claimAdvice" border style="width: 90%;border-color: -sharpBAD0FF;margin: 0 auto; "
                  @expand-change="rowExpand($event,"claimAdvice")" @selection-change="handleSelectionChange">
                    <el-table-column type="expand" label-class-name="claimAdvice_header">

JS part
`settlement.groupClaimAdvice.pageQuery (params). Then (response= > {

)
        if(response.data){
            // this.templistobserve
          this.tempList = response.data
          row.children = this.tempList
        }
     })`

the above code data is available, but there is no way to show that the data console actually exists on the page.
data written when simulating the function by yourself

let data = [{
        id:"201",
        name:"",
        desc:""
      }]
      if(data){
        row.children=data
      }

in this way, the page can render to, why, which master can help solve the problem

Mar.13,2022

1, problem: the acquired data is an array, and this array is an attribute to be assigned to an object, but cannot be updated;
2. Reason: the Vue framework itself cannot detect changes in object attributes: delete or add;
3. The solution is to use Vue.set (valObj,'a',1) or this.$set (valObj,'a',1).
refer to the official website for a detailed description of such problems: ide/list.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.


this.$set(row, 'children', response.data);
Menu