vben-admin BasicTable分页
<template> <PageWrapper contentFullHeight contentBackground> <BasicTable @register="registerTable" :pagination="{ pageSize: 20 }"> <template #toolbar> <a-button type="primary" @click="handleCreate"> 添加 </a-button> </template> <template #bodyCell="{ column, record }"> <template v-if="column.key === 'action'"> <TableAction :actions="[ { icon: 'clarity:note-edit-line', tooltip: '编辑资料', onClick: handleEdit.bind(null, record), }, { icon: 'ant-design:delete-outlined', color: 'error', tooltip: '删除', popConfirm: { title: '是否确认删除', placement: 'left', confirm: handleDelete.bind(null, record), }, }, ]" /> </template> </template> </BasicTable> <projectModal @register="register" /> </PageWrapper> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { PageWrapper } from '/@/components/Page'; import { BasicTable, useTable, TableAction } from '/@/components/Table'; import { useI18n } from '/@/hooks/web/useI18n'; import { useModal } from '/@/components/Modal'; import projectModal from './components/businessDivisionModal.vue'; import { GetBusinessUnitList, Delete } from '/@/api/basic/businessunit'; import { useMessage } from '/@/hooks/web/useMessage'; const { t } = useI18n(); export default defineComponent({ components: { PageWrapper, BasicTable, TableAction, projectModal }, setup() { const [register, { openModal }] = useModal(); const { createMessage } = useMessage(); const columns = [ { title: '编号', dataIndex: 'code', key: 'code', }, { title: '名称', dataIndex: 'name', key: 'name', }, { title: '是否禁用', dataIndex: 'isDisabled', key: 'isDisabled', customRender: (record) => { if (record.text === true) { return '是'; } else if (record.text === false) { return '否'; } }, }, { title: '创建人', dataIndex: 'creatorName', key: 'creatorName', }, { title: '创建时间', dataIndex: 'creationTime', key: 'creationTime', }, { title: '最后修改人', dataIndex: 'lastModifierName', key: 'lastModifierName', }, { title: '最后修改时间', dataIndex: 'lastModificationTime', key: 'lastModificationTime', }, ]; const [registerTable, { reload }] = useTable({ title: '分页列表', rowKey: 'id', api: GetBusinessUnitList, beforeFetch: (data) => { // 接口请求前 参数处理 var temp = { SkipCount: data.page, MaxResultCount: data.pageSize, }; return temp; }, afterFetch: (data) => { //请求之后对返回值进行处理 console.log(data); }, pagination: { //分页的配置 pageSize: 1, }, columns: columns, showTableSetting: true, bordered: true, actionColumn: { width: 120, title: '操作', dataIndex: 'action', }, }); function handleCreate() { openModal(true, { isUpdate: false, }); } function handleEdit(record: Recordable) { openModal(true, { record, isUpdate: true, }); } async function handleDelete(record: Recordable) { try { var res = await Delete(record.id); createMessage.success(res); } catch (error) { console.log(error); } // reload(); } return { registerTable, reload, columns, register, openModal, handleCreate, handleEdit, handleDelete, t, }; }, }); </script> <style lang="less" scoped> ::v-deep(.vben-collapse-container__header) { border-bottom: 0px !important; } </style>
//接口 import { defHttp } from '/@/utils/http/axios'; enum Api { CreateModification = '/business-unit/modification', GetBusinessUnitList = '/business-unit/paged', Delete = '/business-unit/', } export function GetBusinessUnitList(params) { return defHttp.get( { url: Api.GetBusinessUnitList, params, }, { //配置这个就可代理 上面的路径了 apiUrl: '/mst', }, ); } export function CreateModification(params) { return defHttp.post( { url: Api.CreateModification, params, }, { //配置这个就可代理 上面的路径了 apiUrl: '/mst', }, ); } export function Delete(params) { return defHttp.delete( { url: Api.Delete + params, }, { //配置这个就可代理 上面的路径了 apiUrl: '/mst', }, ); }