最近在用vben admin開(kāi)發(fā)后臺(tái)管理系統(tǒng)，vben admin這個(gè)后管端框架封裝的非常細(xì)，顆粒度非常細(xì)，如果了解里面的組件或者api用法，那開(kāi)發(fā)起來(lái)非?？?。如果不了解，那就非常痛苦了，目前關(guān)于vben admin這塊的開(kāi)發(fā)問(wèn)題的博客很少，所以有的問(wèn)題很難查到。我經(jīng)歷了這樣的過(guò)程，于是就把在開(kāi)發(fā)中遇到的問(wèn)題總結(jié)下來(lái)，希望讓能用到的同學(xué)少走一點(diǎn)彎路。

一、接口請(qǐng)求回來(lái)的數(shù)據(jù)結(jié)構(gòu)不匹配現(xiàn)在的表格組件怎么辦

首先我遇到的第一個(gè)問(wèn)題就是，后端返回了數(shù)據(jù)，但是數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)名稱(chēng)都不是我想要的，因?yàn)閠able表格組件是封裝好的，其中的字段名也都是定好的，那如果后端返回的數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)名不一樣怎么辦呢？

先看代碼

// 獲取頁(yè)面的列表數(shù)據(jù)
// 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('-------------------請(qǐng)求之后的參數(shù)處理---------');
        // 獲取接口的原始數(shù)據(jù)
        getRawData();
        return data;
    },
    useSearchForm: true,
    bordered: true,
    showIndexColumn: false,
});

對(duì)于getRuleList這個(gè)接口，我希望返回的數(shù)據(jù)結(jié)構(gòu)是這樣的：

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

但是現(xiàn)在后端返回的數(shù)據(jù)結(jié)構(gòu)是這樣的：

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

這個(gè)時(shí)候就需要在接口請(qǐng)求數(shù)據(jù)回來(lái)后做一層轉(zhuǎn)換了；

代碼如下：

//獲取客戶資料列表
export const getRuleList = (params: any) => {
  return new Promise((resolve, reject) => {
    defHttp
      .post<any>(
        {
          url: Api.GetRuleList,
          params,
        }
      )
      .then((res) => {
        console.log('-----------列表返回的數(shù)據(jù)------------');
        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,
        }
        });
      });
  });
};

做了一層轉(zhuǎn)換之后，現(xiàn)在的數(shù)據(jù)結(jié)構(gòu)滿足這個(gè)需求了；

這個(gè)問(wèn)題就解決了，表單數(shù)據(jù)渲染出來(lái)了。
但是又有新的數(shù)據(jù)來(lái)了，如果頁(yè)面帶有搜索表格，表格中的數(shù)據(jù)怎么反顯？

2、帶有表單和表格的頁(yè)面，表單數(shù)據(jù)怎么反顯？

這個(gè)問(wèn)題需要分兩步完成，第一步：拿到表單數(shù)據(jù)；第二步：怎么賦值到表單中；

我遇到這個(gè)問(wèn)題是因?yàn)楸砀駭?shù)據(jù)可以反顯了，但是表單數(shù)據(jù)就拿不到了。

// 獲取頁(yè)面的列表數(shù)據(jù)
// getRuleList();
const [registerTable, { getRawDataSource, reload, updateTableDataRecord, getForm }] = useTable({
    api: getRuleList,
    columns,
    formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showResetButton: false,
        showSubmitButton: false,
    },
    // 請(qǐng)求數(shù)據(jù)接口之前的處理函數(shù)
    beforeFetch: (params) => {
        params.ruleId = query.ruleId;
        return params;
    },
    // 請(qǐng)求接口數(shù)據(jù)之后的處理函數(shù)
    afterFetch: (data) => {
        console.log('-------------------請(qǐng)求之后的參數(shù)處理---------');
        // 獲取接口的原始數(shù)據(jù)并給表單賦值，使表單反顯
        getRawData();
        return data;
    },
    useSearchForm: true,
    bordered: true,
    showIndexColumn: false,
});

一、解決第一步的問(wèn)題：拿到表單數(shù)據(jù)

在afterFetch這個(gè)處理函數(shù)中打印請(qǐng)求回來(lái)時(shí)，打印data，打印不出來(lái)，這個(gè)時(shí)候，我們不知道data是什么數(shù)據(jù)，不過(guò)從后面渲染的頁(yè)面數(shù)據(jù)來(lái)看，這個(gè)data應(yīng)該是res.data.list，list里面是不包含表單數(shù)據(jù)，只包含表格數(shù)據(jù)，那我怎么拿到原始的請(qǐng)求數(shù)據(jù)呢？

vben admin提供了一個(gè)方法 useTable中的 getRawDataSource （請(qǐng)看代碼中是如何引入的）可以拿到接口的原始數(shù)據(jù)，這個(gè)時(shí)候就可以拿到表單數(shù)據(jù)了。

// 獲取接口的原始數(shù)據(jù)
// getRawData();
// 獲取接口的完整數(shù)據(jù)
function getRawData() {
    console.log('請(qǐng)?jiān)诳刂婆_(tái)查看！');
    console.log(getRawDataSource());
    // 獲取到請(qǐng)求回來(lái)的原始數(shù)據(jù)，然后對(duì)原始數(shù)據(jù)賦值
    let getFormData = getRawDataSource();
    
    // 第一步 拿到表單數(shù)據(jù)
    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);
    
    // 第二步 對(duì)表單數(shù)據(jù)進(jìn)行賦值
    let form = getForm();
    console.log('---------------獲取到的form表單數(shù)據(jù)-----------------');
    console.log(form);
    getForm().setFieldsValue({
        datalistName: fromData.departmentName,
        department: fromData.departmentName,
        field: fromData.field,
        UsageScenario: fromData.scenarioName,
        applicableUser: fromData.applicableUserName,
    });
}

二、解決第二步的問(wèn)題：把拿到的數(shù)據(jù)賦值給表單

useTable中提供了getForm這個(gè)方法，getForm這個(gè)方法中包含了對(duì)表單處理的各種方法，其中對(duì)表單賦值的方法是setFieldsValue，設(shè)置表單數(shù)據(jù)的方法。（上面第一步的代碼也包含了第二步的代碼）

// 第二步 對(duì)表單數(shù)據(jù)進(jìn)行賦值
    let form = getForm();
    console.log('---------------獲取到的form表單數(shù)據(jù)-----------------');
    console.log(form);
    getForm().setFieldsValue({
        datalistName: fromData.departmentName,
        department: fromData.departmentName,
        field: fromData.field,
        UsageScenario: fromData.scenarioName,
        applicableUser: fromData.applicableUserName,
    });

第一步，第二步的問(wèn)題都解決了，我們還有一步要完成，就是什么時(shí)候調(diào)用getRawData去獲取數(shù)據(jù)，去賦值。
這個(gè)時(shí)候我們就要用到了afterFetch，在afterFetch中調(diào)用getRawData，這樣就算徹底解決了我的問(wèn)題。

好了，就到這吧，后續(xù)還會(huì)發(fā)出新的總結(jié)，希望能幫到大家。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-707323.html

到了這里，關(guān)于vben-admin中渲染table表格時(shí)怎么處理不同的數(shù)據(jù)結(jié)構(gòu)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！