当前位置：首页 > news >正文

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

news 2025/7/18 19:21:40

最近在用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:2000message:null,data:{list: [....],last: 161,count: 1610,pageNo: 1,pageSize: 10,}
}

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

{resultCode:2000resultMessage: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,});