这个报错的核心原因是你的requestFunction没有正确返回响应数据，导致responseAdapter拿到的resp是undefined，自然就没法读取resp.data了。

具体来说，你的requestFunction里调用this.$http后，在then回调里只做了赋值和打印日志，但没有把响应结果返回出去。vue-tables-2需要requestFunction返回一个包含响应数据的Promise，这样responseAdapter才能拿到有效的resp参数。另外，this.data = res.data.data这行其实是多余的，vue-tables-2会自动处理服务端返回的数据并渲染表格，不需要手动把数据赋值给组件的data属性。

修改后的代码： #

<v-server-table :columns="columns" :options="options"></v-server-table>

<script>
var config = { "PMI-API-KEY": "erpepsimprpimaiy" };
export default {
name: "user-profile",
data() {
return {
columns: ["golongan_name"],
options: {
requestFunction: function(data) {
return this.$http({
url: "api/v1/golongan_darah/get_all_data",
method: "post",
headers: config
}).then(res => {
// 关键：把响应数据返回给vue-tables-2的responseAdapter处理
return res.data;
});
},
filterable: ["golongan_name"],
sortable: ["golongan_name"],
filterByColumn: true,
perPage: 3,
pagination: { chunk: 10, dropdown: false },
responseAdapter: function(resp) {
return {
data: resp.data,
count: resp.total
};
}
}
};
}
};
</script>

关键修改点： #

• 在requestFunction的then回调里，把res.data返回出去，确保responseAdapter能接收到正确的resp参数
• 移除了多余的this.data = res.data.data赋值操作

这样修改后，vue-tables-2就能正确获取到服务端返回的数据，渲染表格的同时也不会再出现那个报错了。

内容的提问来源于stack exchange，提问作者Jauhardev