最近在用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,
});
第一步，第二步的问题都解决了，我们还有一步要完成，就是什么时候调用getRawData去获取数据，去赋值。
这个时候我们就要用到了afterFetch，在afterFetch中调用getRawData，这样就算彻底解决了我的问题。
好了，就到这吧，后续还会发出新的总结，希望能帮到大家。