DevExtreme框架由于数据量太大，加载太慢，采用分页方式进行处理（基本上所有的操作都从客户端转移到了服务端）

首先我们需要引入官方的一个函数：

import CustomStore from 'devextreme/data/custom_store';

我们需要通过这个函数去处理交互数据

 

先放个图：

 上图中跟分页有关的属性分别是：

1.:data-source="store" ，这个是存放数据源用的，需要用到我们上面的CustomStore 函数，

2.:remote-operations="true" ，这个是开启自定义数据源的一个参数，也就是说只有开启这个，我们才能够将数据的操作转移到服务端，页面才能够成功分页

3.@initialized="saveGridInstance",这个参数是对dom树进行刷新需要用到的，下面讲，

先说一下，获取数据源并返回到页面的实现

如下图：（先看图，代码放后面）

 

 代码如下：

import CustomStore from 'devextreme/data/custom_store';
  const isNotEmpty = (value: any) => value !== undefined && value !== null && value !== '';
  const store = new CustomStore({
    key: 'keyId',
    async load(loadOptions) {
      const paramNames = [
        'skip',
        'take',
        'requireTotalCount',
        'requireGroupCount',
        'sort',
        'filter',
        'totalSummary',
        'group',
        'groupSummary',
      ] as const;
      let newObj = {};
      let key = '';
      paramNames
        .filter((paramName) => isNotEmpty(loadOptions[paramName]))
        .map((paramName) => {
          key = paramName;
          let value = JSON.stringify(loadOptions[paramName]);
          let numValue = Number(value);
          if (!isNaN(numValue)) {
            value = numValue;
          }
          newObj[key] = value;
        });
      newObj.planId = props.planId;
      newObj.schoolId = props.schoolId;
      newObj.gradeId = props.gradeId;
      try {
        const response = await hospitalList(`http://192.168.3.52:9090/zzf/sc-tripartite-user/getUserDetailByPlanId`, newObj);
        const result = await response;
        console.log(result, '=========接口数据  ');
        spinning.value = false;

        let newArr = result.records;
        newIndex.value = loadOptions['skip'] || 0;
        for (let i = 0; i < newArr.length; ++i) {
          newArr[i].rowIndex = newIndex.value + 1;
          newIndex.value = newIndex.value + 1;
        }
        totals.value = result.total;
        return {
          data: newArr,
          totalCount: result.total,
        };
      } catch (err) {
        throw new Error('Data Loading Error');
      }
    },
  });

还有一个点，就是分页的时候我们的参数需要传number而非string

 然后说一下刷新的点，这个功能是，当我们的列表有其他的筛选条件时，接口数据返回正确，但是页面不显示！才去研究了一下

@initialized="saveGridInstance”这个写好之后

 

 这样就可以了

这篇主要说的就是这些了，这个框架确实坑大大的多，希望能帮助到不小心用到这玩意的兄弟