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 对象, 用满足规定的格式返回就可以了文章来源:https://www.toymoban.com/news/detail-460385.html
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,
});
});
});
};
// or
export const demoListApi = (params: DemoParams) => {
return defHttp
.get<DemoListGetResultModel>({
url: Api.DEMO_LIST,
params,
headers: {
// @ts-ignore
ignoreCancelToken: true,
},
})
.then((res) => {
return {
items: res.items,
}
});
};
建议表格这种东西使用 vben自己封装的, ant design 自身的还需要你去动态调整表格高度文章来源地址https://www.toymoban.com/news/detail-460385.html
到了这里,关于vue vben admin 使用, (个人感觉这项目封装的太深了!!!!)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!