vue3 vxe-grid查询有返回数据，但是不显示的问题解决

1、先上一张图，这里面没有数据：

但我们看一下后台，是有数据返回的：

2、我们换成VxeBasicTable是有值的，但是这个没办法调用vxe-grid的导出方法。（这里没有细去研究，因为时间问题。）

换成vxe-grid上面的就没有问题，但是没有数据显示，基本上应该是配制的问题。

3、换VxeGrid数据没有显示，但是导出方法是有了。

让我们看一下gridOptions的定义，去解决没有数据显示的问题：

const gridOptions = reactive<BasicTableProps>({
    id: 'userTable',
    showHeaderOverflow: false,
    showOverflow: true,
    keepSource: true,
    columns: xzColumns,
    size: 'small',
    pagerConfig: {
      currentPage: 1,
      pageSize: 100,
      pageSizes: [10, 20, 50, 100, 200, 500, 1000],
    },
    toolbarConfig: {
      slots: { buttons: 'toolbar_buttons' },
      refresh: false,
      import: false,
      print: false,
      zoom: false,
      export: false,
      custom: false,
    },
    formConfig: {
      enabled: false,
      items: userFormSchema,
    },
    exportConfig: {
      remote: false,
      type: 'xlsx',
      filename: '用户-' + dayjs(new Date()).format('YYYY-MM-DD'),
      sheetName: 'Sheet1',
      columns: [
        { field: 'userid' },
        { field: 'realname' },
        { field: 'sex' },
        { field: 'usertype' },
        { field: 'tel' },
        ...
        { field: 'email' },
        { field: 'note' },
      ],
      // 局部自定义类型
      types: ['xlsx', 'csv', 'html', 'xml', 'txt', 'pdf'],
      // 自定义数据量列表
      modes: ['current', 'selected'],
      exportMethod({ options }) {
        // console.log('自定义导出方法', options);
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              status: 'success',
              msg: '自定义导出',
            });
          }, 1000);
        });
      },
    },
    printConfig: {
      // 自定义数据量列表
      modes: ['current', 'selected'],
    },
    // 表格配置
    columnConfig: {
      resizable: true,
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    height: 'auto',
    proxyConfig: {
      props: {
        // 对应响应结果 Promise<{ result: [], page: { total: 100 } }>
        result: 'items', // 配置响应结果列表字段
        total: 'total', // 配置响应结果总页数字段
      },
      ajax: {
        query: async ({ page, form }) => {
          return getUserList({
            page: page.currentPage,
            pageSize: page.pageSize,
            fieldname: searchForm.fieldname,
            fieldreq: searchForm.fieldreq,
            fieldvalue: searchForm.fieldvalue,
          });
        },
        queryAll: async ({ form }) => {
          return await getUserList(form);
        },
      },
    },
  });

这里最主要是这个代码要与你的配制一致，就是服务器返回的数据，键一定要配好，否则就是没有数据。

props: {
        // 对应响应结果 Promise<{ result: [], page: { total: 100 } }>
        result: 'items', // 配置响应结果列表字段
        total: 'total', // 配置响应结果总页数字段
      },

因为服务器返回的记录数是total,然后返回的列键是items，这里要配成这个就可以了。

原文地址：https://blog.csdn.net/jwbabc/article/details/140516335

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！