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

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

推荐整理分享vue vben admin 使用, (个人感觉这项目封装的太深了!!!!)(vue-admin-master)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue admin go,vue_admin,vue-admin-pro,vue-admin-master,vue-admin-pro,vue-admin-master,vue admin temple,vue adminlte,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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