浦江建设局网站/浏览器观看b站视频的最佳设置

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>
<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.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 对象, 用满足规定的格式返回就可以了

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

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