vue vben admin 的组件使用

非官方的参考文档, 感觉比官方的更实用

baseTable 使用

我们是不会被困难打败的, 只会越战越勇!

开启了表单搜索功能, demo 代码是 formtable 组件, 个人还是比较喜欢 template 方式, 这样的方式使用不了 getForm 这种方法

需要注意的是, 如果使用了组件表单搜索功能, 就是说你需要提供一个获取数据的api, 这里着重去看怎么适配表格需要的响应数据结构

• 组件代码

<template>
  <BasicTable
    ref="bastTable"
    :can-resize="true"
    :use-search-form="true"
    :form-config="getFormConfig()"
    :api="demoListApi"
    :columns="getBasicColumns()"
  />
  <div>get</div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './tableData';

  import { demoListApi } from '/@/api/demo/table';

  export default defineComponent({
    components: { BasicTable },
    setup() {
      return {
        demoListApi,
        getFormConfig,
        getBasicColumns,
      };
    },
  });
</script>

• 表格的请求数据结构配置
  代码地址

table: {
    // Form interface request general configuration
    // support xxx.xxx.xxx
    fetchSetting: {
      // The field name of the current page passed to the background
      pageField: 'page',
      // The number field name of each page displayed in the background
      sizeField: 'pageSize',
      // Field name of the form data returned by the interface
      listField: 'items',
      // Total number of tables returned by the interface field name
      totalField: 'total',
    },

如果你的数据结构不满足, 可以在请求方法里面做一层转换; 在请求方法里面重新返回一个 promise 对象, 用满足规定的格式返回就可以了

export const demoListApi = (params: DemoParams) => {
  return new Promise((resolve, reject) => {
    defHttp
      .get<DemoListGetResultModel>({
        url: Api.DEMO_LIST,
        params,
        headers: {
          // @ts-ignore
          ignoreCancelToken: true,
        },
      })
      .then((res) => {
        resolve({
          items: res.items,
        });
      });
  });
};

建议表格这种东西使用 vben自己封装的, ant design 自身的还需要你去动态调整表格高度

baseUpload 使用方法(主要还是接口适配)

前端接口适配方法, 做一次中间转换

// 需要的数据结构类型
{
  data: {
    url: 'xxxx.png' // 返回的上传链接
  }
}

// 转换
export function uploadApi(
  params: UploadFileParams,
  onUploadProgress: (progressEvent: ProgressEvent) => void,
) {
  return defHttp
    .uploadFile<UploadApiResult>(
      {
        url: uploadUrl,
        onUploadProgress,
      },
      params,
    )
    .then((res) => {
      return {
        data: res.data,
      };
    });
}