vue vben admin 使用, (个人感觉这项目封装的太深了!!!!)

useTable 使用

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

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

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

• 组件代码

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

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

table:{// Form interface request general configuration// support xxx.xxx.xxxfetchSetting:{// The field name of the current page passed to the backgroundpageField:'page',// The number field name of each page displayed in the backgroundsizeField:'pageSize',// Field name of the form data returned by the interfacelistField:'items',// Total number of tables returned by the interface field nametotalField:'total',},

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

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

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