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

Modal 弹窗

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

Modal相关使用及概念

练习 —— 在之前table基础上，添加编辑功能，点击编辑按钮，弹出弹窗显示单条表格数据，数据可修改。（并添加删除功能）

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

src/views/myComponents/tableTest中添加EditModal.vue

EditModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    width="600px"
    title="编辑"
    @register="registerModal"
    @ok="handleSubmit"
    @cancel="handleCancel"
    @visibleChange="handleVisibleChange"
    cancelText="返回"
    okText="保存"
  >
    <template #default>
      <div>
        <BasicForm @register="registerForm" />
      </div>
    </template>
  </BasicModal>
</template>

<script lang="ts">
  import {
      defineComponent } from 'vue';
  import {
      Card } from 'ant-design-vue';
  import {
      BasicModal, useModalInner } from '/@/components/Modal';
  import {
      BasicForm, useForm } from '/@/components/Form';
  import {
      useMessage } from '/@/hooks/web/useMessage';
  import {
      schemasView } from './data';

  export default defineComponent({
     
    name: 'EditModal',
    components: {
     
      BasicForm,
      BasicModal,
      [Card.name]: Card,
    },
    setup(_, {
       emit