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

useTable 使用

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

开启了表单搜索功能, 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 自身的还需要你去动态调整表格高度