Vben Admin 自学记录 —— Drawer组件的基本使用及练习（持续更新中...）

Drawer 抽屉组件

对 antv 的 drawer 组件进行封装，扩展拖拽，全屏，自适应高度等功能。

Drawer相关使用及概念

练习 —— 在之前table基础上，添加查看功能，点击查看按钮，弹出抽屉显示单条表格数据，且不可修改

之前相关记录： Table组件的基本使用及练习

src/views/myComponents/tableTest中添加ViewDrawer.vue，用来独立使用Drawer，写内部代码

data.ts 中配置Drawer中表单字段

export const schemasView: FormSchema[] = [{field: 'divider-bill',component: 'Divider',label: '信息',colProps: {span: 24,},},{field: 'name',component: 'Input',label: '姓名',required:true,},{field: 'sex',component: 'Select',label: '性别',required:true,componentProps: {options: sexOption,},},{field: 'dt',component: 'DatePicker',label: '出生日期',required:true,componentProps: {style: {width: '100%',},valueFormat: 'YYYYMMDD',},},{field: 'age',component: 'InputNumber',label: '年龄',required:true,componentProps: {style: {width: '100%',},step: 1,min: 0,max: 150,},},{label: '电话',field: 'tel',component: 'Input',required:true,dynamicRules: ({ values }) => {if (values.tel !== undefined){if (values.tel.indexOf('-')>0){return [{required:true,trigger: 'change',message: '请输入正确的号码',pattern:   /(^\d{4}-\d{7}$)|(^\d{3}-\d{8}$)/,}];}else {return [{required:true,trigger: 'change',message: '请输入正确的号码',pattern: /^1[3|4|5|7|8][0-9]{9}$/,},];}}else {return[{required:true,message: '请输入电话',}]}},},{field: 'address',component: 'InputTextArea',label: '住址',required:true,},
];

ViewDrawer 代码

<template><div:style="{overflow: 'hidden',}"><BasicDrawerv-bind="$attrs"@register="registerDrawer"@visibleChange="handleVisibleChange":isDetail="true"title="查看"placement="bottom"height="100%":destroyOnClose="true"><div><BasicForm @register="registerForm"></BasicForm></div></BasicDrawer></div>
</template><script lang="ts">import { defineComponent } from 'vue';import { Divider } from 'ant-design-vue';import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';import { BasicForm, useForm } from '/@/components/Form';import { schemasView } from './data';export default defineComponent({name: 'ViewDrawer',components: {BasicDrawer,BasicForm,Divider,},setup(_, { emit }) {// 配置Drawerconst [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => {console.log('打印从table传递的数据:', data);setFieldsValue(data), setProps({ disabled: true });  // data值赋给表单，设置disabled});// 配置Formconst [registerForm, { validate, setFieldsValue, setProps }] = useForm({labelWidth: 150,baseColProps: {offset: 1,span: 10,},schemas: schemasView,showActionButtonGroup: false,});function handleVisibleChange(visible: boolean) {if (!visible) {emit('reload');}}return {registerDrawer,closeDrawer,registerForm,validate,setFieldsValue,setProps,handleVisibleChange};},});
</script><style scoped></style>

basicTable.vue中使用

<template><div:style="{overflow: 'hidden',position: 'relative',height: '100%',}"><!-- 注册table --><BasicTable @register="registerTable"><template #action="{ record }"><TableAction:actions="[{tooltip: '查看',icon: 'clarity:info-standard-line',onClick: handleView.bind(null, { data: record }), },{tooltip: '编辑',icon: 'clarity:note-edit-line',// onClick: handleEdit.bind(null, { data: record,}),},{tooltip: '删除',color: 'error',icon: 'ant-design:delete-outlined',// popConfirm: {//   title: '是否确定删除？',//   confirm: handleDel.bind(null, record),// },},]"/></template><template #toolbar><a-button type="primary">{{ '新增' }}</a-button></template></BasicTable><!-- 页面引入 --><ViewDrawer @reload="handleReload" @register="registerDrawer" /></div>
</template><script lang="ts">import { defineComponent } from 'vue';import { formConfig, columns, initData } from './data';import { BasicTable, useTable, TableAction } from '/@/components/Table';import { useDrawer } from '/@/components/Drawer';import ViewDrawer from './ViewDrawer.vue';export default defineComponent({name: 'tableTest',components: {BasicTable,TableAction,ViewDrawer,},setup() {const data = initData();// 设置tableconst [registerTable, { reload }] = useTable({title: '查询结果',dataSource: data,columns: columns,bordered: true,useSearchForm: true, //开启搜索区域formConfig: formConfig,actionColumn: {width: 120,title: '操作',dataIndex: 'action',slots: { customRender: 'action' },},rowSelection: { type: 'radio' },pagination: { pageSize: 10 },showTableSetting: true,tableSetting: { fullScreen: true },showIndexColumn: true,indexColumnProps: { fixed: 'left' },});// 注册Drawerconst [registerDrawer, { openDrawer }] = useDrawer();// 查看按钮function handleView({ data }) {// 弹出抽屉，传递dataopenDrawer(true, data);}function handleReload() {reload();}return {registerTable,reload,registerDrawer,handleView,handleReload,};},});
</script><style scoped></style>

页面效果

Drawer抽屉