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

删减了一些代码，
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">
</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);
}
})
}

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

回答

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

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

以上是 table data数据更新后，插槽数据提示undefined,请问如何可以动态渲染数据? 的全部内容， 来源链接： utcz.com/a/40499.html

回到顶部