vben-admin中渲染table表格时怎么处理不同的数据结构-Toy模板网

这篇具有很好参考价值的文章主要介绍了vben-admin中渲染table表格时怎么处理不同的数据结构。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在用vben admin开发后台管理系统，vben admin这个后管端框架封装的非常细，颗粒度非常细，如果了解里面的组件或者api用法，那开发起来非常快。如果不了解，那就非常痛苦了，目前关于vben admin这块的开发问题的博客很少，所以有的问题很难查到。我经历了这样的过程，于是就把在开发中遇到的问题总结下来，希望让能用到的同学少走一点弯路。

一、接口请求回来的数据结构不匹配现在的表格组件怎么办

首先我遇到的第一个问题就是，后端返回了数据，但是数据结构和数据名称都不是我想要的，因为table表格组件是封装好的，其中的字段名也都是定好的，那如果后端返回的数据结构和数据名不一样怎么办呢？

先看代码

// 获取页面的列表数据
// getRuleList();
const [registerTable, { getRawDataSource, reload, updateTableDataRecord, getForm }] = useTable({
    api: getRuleList,
    columns,
    formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showResetButton: false,
        showSubmitButton: false,
    },
    beforeFetch: (params) => {
        params.ruleId = query.ruleId;
        return params;
    },
    afterFetch: (data) => {
        console.log('-------------------请求之后的参数处理---------');
        // 获取接口的原始数据
        getRawData();
        return data;
    },
    useSearchForm: true,
    bordered: true,
    showIndexColumn: false,
});

对于getRuleList这个接口，我希望返回的数据结构是这样的：

{
   code:2000
   message:null,
   data:{
          list: [....],
          last: 161,
          count: 1610,
          pageNo: 1,
          pageSize: 10,
   }
}

但是现在后端返回的数据结构是这样的：

{
   resultCode:2000
   resultMessage:null,
   resultData:{
          records: [....],
          pageCount: 161,
          totalCount: 1610,
          pageNum: 1,
          pageSize: 10,
   }
}

这个时候就需要在接口请求数据回来后做一层转换了；

代码如下：

//获取客户资料列表
export const getRuleList = (params: any) => {
  return new Promise((resolve, reject) => {
    defHttp
      .post<any>(
        {
          url: Api.GetRuleList,
          params,
        }
      )
      .then((res) => {
        console.log('-----------列表返回的数据------------');
        console.log(res);
        resolve({
        code:res.resultCode,
        message:res.message,
        data:{
          list: res.resultData.records,
          last: res.resultData.pageCount,
          count: res.resultData.totalCount,
          pageNo: res.resultData.pageNum,
          pageSize: res.resultData.pageSize,
        }
        });
      });
  });
};

做了一层转换之后，现在的数据结构满足这个需求了；

这个问题就解决了，表单数据渲染出来了。
但是又有新的数据来了，如果页面带有搜索表格，表格中的数据怎么反显？

2、带有表单和表格的页面，表单数据怎么反显？

这个问题需要分两步完成，第一步：拿到表单数据；第二步：怎么赋值到表单中；

我遇到这个问题是因为表格数据可以反显了，但是表单数据就拿不到了。

// 获取页面的列表数据
// getRuleList();
const [registerTable, { getRawDataSource, reload, updateTableDataRecord, getForm }] = useTable({
    api: getRuleList,
    columns,
    formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showResetButton: false,
        showSubmitButton: false,
    },
    // 请求数据接口之前的处理函数
    beforeFetch: (params) => {
        params.ruleId = query.ruleId;
        return params;
    },
    // 请求接口数据之后的处理函数
    afterFetch: (data) => {
        console.log('-------------------请求之后的参数处理---------');
        // 获取接口的原始数据并给表单赋值，使表单反显
        getRawData();
        return data;
    },
    useSearchForm: true,
    bordered: true,
    showIndexColumn: false,
});

一、解决第一步的问题：拿到表单数据

在afterFetch这个处理函数中打印请求回来时，打印data，打印不出来，这个时候，我们不知道data是什么数据，不过从后面渲染的页面数据来看，这个data应该是res.data.list，list里面是不包含表单数据，只包含表格数据，那我怎么拿到原始的请求数据呢？

vben admin提供了一个方法 useTable中的 getRawDataSource （请看代码中是如何引入的）可以拿到接口的原始数据，这个时候就可以拿到表单数据了。

// 获取接口的原始数据
// getRawData();
// 获取接口的完整数据
function getRawData() {
    console.log('请在控制台查看！');
    console.log(getRawDataSource());
    // 获取到请求回来的原始数据，然后对原始数据赋值
    let getFormData = getRawDataSource();
    
    // 第一步 拿到表单数据
    fromData.name = getFormData.data.name;
    fromData.departmentName = getFormData.data.departmentName;
    fromData.field = getFormData.data.field;
    fromData.scenarioName = getFormData.data.scenarioName;
    fromData.applicableUserName = getFormData.data.applicableUserName;
    console.log('---------------form表单-----------------');
    console.log(fromData);
    
    // 第二步 对表单数据进行赋值
    let form = getForm();
    console.log('---------------获取到的form表单数据-----------------');
    console.log(form);
    getForm().setFieldsValue({
        datalistName: fromData.departmentName,
        department: fromData.departmentName,
        field: fromData.field,
        UsageScenario: fromData.scenarioName,
        applicableUser: fromData.applicableUserName,
    });
}

二、解决第二步的问题：把拿到的数据赋值给表单

useTable中提供了getForm这个方法，getForm这个方法中包含了对表单处理的各种方法，其中对表单赋值的方法是setFieldsValue，设置表单数据的方法。（上面第一步的代码也包含了第二步的代码）

// 第二步 对表单数据进行赋值
    let form = getForm();
    console.log('---------------获取到的form表单数据-----------------');
    console.log(form);
    getForm().setFieldsValue({
        datalistName: fromData.departmentName,
        department: fromData.departmentName,
        field: fromData.field,
        UsageScenario: fromData.scenarioName,
        applicableUser: fromData.applicableUserName,
    });