Element-plus之使用表格table，后怎么传入数据

原创已于 2023-03-01 10:22:49 修改 · 889 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript

于 2023-02-28 15:02:28 首次发布

在DjangoRESTframework中配置DEFAULT_PAGINATION_CLASS为PageNumberPagination时，前端Vue3使用axios获取数据出现不同情况的问题。当设置DEFAULT_PAGINATION_CLASS时，若前端直接用res.data获取数据，可能会遇到后端警告或前端TypeError。解决方法是前端改为使用res.data.results来获取分页后的数据。问题已通过调整前后端交互方式解决。

使用的是django rest framework+vue3的架构，出现了以下两种问题：

1、django的settings设置：DEFAULT_PAGINATION_CLASSES时，vue使用res.data可以获取后台的数据

REST_FRAMEWORK = {
    #use django's standard 'django.contrib.auth' permissions,
    #or allow read-only access for unauthenticated users,
    # 'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'DEFAULT_PAGINATION_CLASSES':'rest_framework.pagination.PageNumberPagination',  #分页
    'PAGE_SIZE':50,  #分页大小

但是此时运行django项目时，后端会有如下警告：

HINT: The default for DEFAULT_PAGINATION_CLASS is None. In previous versions this was PageNumberPagination. If you wish to define PAGE_SIZE globally whilst defining pagination_class on a per-view basis you may silence this
check.

axios+ts在前端页面传入后端传过来的数值，有以下几个注意的点

2、django的settings设置：DEFAULT_PAGINATION_CLASS时，vue使用res.data获取不到后台的数据，

REST_FRAMEWORK = {
    #use django's standard 'django.contrib.auth' permissions,
    #or allow read-only access for unauthenticated users,
    'DEFAULT_PAGINATION_CLASS':'rest_framework.pagination.PageNumberPagination',
    # 'DEFAULT_PAGINATION_CLASSES':'rest_framework.pagination.PageNumberPagination',  #分页
    'PAGE_SIZE':50,  #分页大小

此时后端运行django项目时，不会有告警，但是前端会报错：

Uncaught (in promise) TypeError: data.includes is not a function

解决办法：

vue使用res.data.results获取后台的数据，后端不用修改，如下

以上两个问题，用第二种的方式解决了，即

后端：设置 'DEFAULT_PAGINATION_CLASS'

前端：vue使用res.data.results获取后台的数据

不知道为什么会出现这种问题，有知道的欢迎留言，谢谢！