【学习打卡】第3天 制作电子书表单

课程名称：Spring Boot+Vue3前后端分离，实战wiki知识库系统

课程章节：6-7 制作电子书表单

主讲老师：甲蛙

课程内容：

• 点击每一行编辑按钮，弹出编辑框

• 编辑框显示电子书表单

课程收获：

点击每一行编辑按钮，弹出编辑框

仿照Ant Design Vue官网的Modal对话框示例，添加电子书编辑按钮后弹出对话框。visible表示是否显示对话框，confirm-loading表示是否显示加载效果。

<a-modal
         title="电子书表单"
         v-model:visible="modalVisible"
         :confirm-loading="modalLoading"
         @ok="handleModalOk"
         >
  <p>test</p>
</a-modal>

并在<script>中加入相应js代码，handleModalOk为点击Ok按钮后的操作，edit为点击编辑按钮后弹出对话框。

// -------- 表单 ---------
const modalVisible = ref(false);
const modalLoading = ref(false);
const handleModalOk = () => {
  modalLoading.value = true;
  setTimeout(() => {
    modalVisible.value = false;
    modalLoading.value = false;
  }, 2000);
};

/**
* 编辑
*/
const edit = () => {
  modalVisible.value = true;
    };

并在编辑按钮处加上点击

//修改前
<a-button type="primary">
  编辑
</a-button>

//修改后
<a-button type="primary" @click="edit">
  编辑
</a-button>

最后修改return，加入如下内容

edit,
modalVisible,
modalLoading,
handleModalOk

编辑框显示电子书表单

首先将按钮部分edit方法改为以每行的数据record作为参数

<a-button type="primary" @click="edit(record)">
  编辑
</a-button>

定义变量ebook为表单中的数据const ebook = ref({});

然后将edit方法的js代码改，将该行的数据record赋值给ebook

const edit = (record: any) => {
  modalVisible.value = true;
  ebook.value = record;
};

仿照antd官网将原来对话框中暂时使用的test改为表单

<a-form :model="ebook" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
  <a-form-item label="封面">
    <a-input v-model:value="ebook.cover" />
      </a-form-item>
  <a-form-item label="名称">
    <a-input v-model:value="ebook.name" />
      </a-form-item>
  <a-form-item label="分类一">
    <a-input v-model:value="ebook.category1Id" />
      </a-form-item>
  <a-form-item label="分类二">
    <a-input v-model:value="ebook.category2Id" />
      </a-form-item>
  <a-form-item label="描述">
    <a-input v-model:value="ebook.desc" type="textarea" />
      </a-form-item>
</a-form>

这次学习时间大概半小时，收获不多，主要是学会了怎么开发表单功能。