vue3.0后台管理项目（day16）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情

上一篇文章中我们实现了表格下面的分页器功能，接下来将完成编辑，新增，删除这些按钮的弹出框了。

1. 点击编辑按钮弹出对话框需要使用到element-plus的# Dialog 对话框组件，具体链接如：element-plus.gitee.io/zh-CN/compo… ，我们点击新增会出现如下图所示的对话框，所以我们需要用到form表单组件

2. 将el-form组件添加到el-dialog组件当中，然后每一个el-form-item都对应着相应的标题，比如姓名，地址，手机号，身份，这里的身份使用的是选择框，对应着两个选项，分别是会员以及普通用户，然后还要给这个对话框的form组件添加校验规则，对话框的具体代码如下所示:

<el-form :model="formData" :rules="rules" ref="userForm">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入名字" />
      </el-form-item>
      <el-form-item label="身份" :label-width="formLabelWidth" prop="state">
        <el-select v-model="formData.state" placeholder="请选择身份">
          <el-option label="会员" value="会员" />
          <el-option label="普通用户" value="普通用户" />
        </el-select>
      </el-form-item>
    </el-form>

3. 对话框的下面还有取消以及提交按钮，在提交之前需要校验，如果校验通过则提交成功，两个按钮使用了template进行了包裹，代码如下所示：

 <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(userForm)">提交</el-button>
      </span>
    </template>

4. 这个表单完成了之后还剩他的rules的校验，如果用户没有填写则提醒用户此项为必填项，以及提醒用户提交失败等，这个功能将在下一篇文章完成。