table data数据更新后，插槽数据提示undefined,请问如何可以动态渲染数据?

Question

删减了一些代码，
1.点击搜索之后查询10条数据，表能正常渲染出来

2.点击表末尾按钮加载新的10条数据，替换原来的tabledata数据后控制台报错，表没有变化还是第一次的样子

<div class="search-tool">
          <el-input placeholder="请输入内容" :disabled="searching" prefix-icon="el-icon-search" v-model="searchinput" @keyup.enter.native="searchEnterFun" clearable class="tool-item" style="width:300px">
          </el-input>
          <el-button class="tool-item" type="primary" :loading="searching" @click="searchEnterFun" plain>搜索</el-button>
</div>
<el-card>
<div slot="header">
标题
</div>
<el-table :data="matchlist"  fit align="center"  :show-header="false">
   <el-table-column>
    <template v-slot:default="scope">
    <span>{{scope.row.matchInfo.UsedTime}}</span>
    </template>
   </el-table-column>
 <div slot="append" class="no-more">
<el-button type="primary" @click="loadMore">点击加载更多</el-button>
</div>
</el-table>
</el-card>

<script>
import { getListData } from '../utils/server.js';
export default {
  data() {
    //选项 / 数据
    return {
      searchinput: '',
      searching: false,
      hasSearch: false,

      matchlist: [],
      rolerank: [],
      pageSize: 10,
      totalPage: 0,
      hasdone: false,
      forceRefresh: true,
      hasloading: true,
      // mytable: this.$refs.refTable,
    };
  },
  methods: {
    //事件处理器
    loadMore: function () {
      let that = this;
      if (that.searchinput) {
        that.totalPage++;
        getListData(that.searchinput, that.totalPage * 10, (params) => {
          if (params.code == 1001) {
                //做数据处理
            var data = params.data.reverse();
            var thislist = that.matchlist.reverse();
            thislist = thislist.concat(data);
            //赋值新数据
            that.matchlist = thislist.reverse();
            that.$message.success('加载成功！');
          } else {
            that.$message({
              type: 'error',
              message: params.data,
            });
          }
        });
      } else {
        that.$message({
          type: 'error',
          message: '查询不能为空！',
        });
      }
    },
    
   
    searchEnterFun: function (e) {
      //input 输入 enter
      let that = this;
      if (e) {
        var keyCode = window.event ? e.keyCode : e.which;
      } else {
        let rname = that.$route.query.name;
        if (rname) that.searchinput = rname;
      }

      // console.log('CLICK', this.input, keyCode)
      //  console.log('回车搜索',keyCode,e);
      if (that.searchinput) {
        that.searching = true;
        getRoleData(that.searchinput, function (msg) {
          //console.log(msg);
          setTimeout(() => {
            that.searching = false;
            that.hasSearch = true;
            //访问接口获取成功以后再改变状态;
            that.$message.success('搜索成功！');
            that.roleinfo = msg.Role;
            that.matchlist = msg.List;
            that.rolerank = msg.Rank;
            //that.tableListener();
          });
        });
      } else {
        that.$message({
          type: 'error',
          message: '查询不能为空！',
        });
      }
    },
  },
  watch: {
    $route: 'searchEnterFun',
  },

};
</script>

const getListData = (name, index, callback) => {
    let url = portUrl + 'getlistdata/getList?name=' + name + '&index=' + index;
    axios.get(url).then(num => {
        if (num.data.code == 1001) {
            callback && callback(num.data);
        } 
    })
}

控制台检查表数据的时候发现数据已经变化了，但是就是报错。

Answer 1

<span>{{scope.row.matchInfo.UsedTime}}</span>

matchInfo为undefined，检查一下返回的数据

Answer 2

调用请求时候console过了matchInfo是有数据的