Vben-Admin表格BasicTable--新手级别示例
1.创建index.vue 以下为页面内容<template><BasicTable @register="register" /></template><script>import { colums } from './data/brand.ts';import { demoListApi } from '/@/api/brand.ts';expo
·
1.创建index.vue 以下为页面内容
<template>
<BasicTable @register="register" />
</template>
<script>
import { defineComponent } from 'vue';
import { columns } from './data/industry.ts';
import { BasicTable, useTable } from '/@/components/Table';
import { demoListApi } from '/@/api/demo/table';
export default defineComponent({
components: { BasicTable },
setup() {
const [register] = useTable({
// api: demoListApi, // 表格api
colums: columns, // 表格头的配置
});
return { register };
},
});
</script>
2.data里的brand数据
import { BasicColumn } from '/@/components/Table/src/types/table';
export const columns: BasicColumn[] = [
{
title: '',
dataIndex: 'equipCategoryError.id',
width: 120,
},
{
title: 'routes.module.task.REPAIR_CODE',
dataIndex: 'equipCategoryError.code',
width: 120,
},
{
title: 'routes.module.task.REPAIR_CONTENT',
dataIndex: 'errorContent',
width: 200,
}
]
3.api里的请求 (自己封装的请求接口) 官方示例
import { defHttp } from '/@/utils/http/axios';
import { DemoParams, DemoListGetResultModel } from './model/tableModel';
enum Api {
DEMO_LIST = '/table/getDemoList',
}
/**
* @description: Get sample list value
*/
export const demoListApi = (params: DemoParams) =>
defHttp.get<DemoListGetResultModel>({
url: Api.DEMO_LIST,
params,
headers: {
ignoreCancelToken: true,
},
});
更多推荐
已为社区贡献1条内容
所有评论(0)