Vue+Element UI管理系统项目的修改功能实现

修改用户信息

①：给修改按钮绑定一个点击事件

     <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            ></el-button>

②：点击修改按钮后弹出的修改信息框

<!-- 修改用户对话框 -->
      <el-dialog
        title="修改用户"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClosed"
      >
        <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editFormRef"
          label-width="70px"
        >
          <el-form-item label="用户名">
            <el-input v-model="editForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="editForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editUserInfo">确 定</el-button>
        </span>
      </el-dialog>

③：控制修改对话框的显示和隐藏

  // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,

④：根据id向后端提交数据，获取用户信息

 // 展示编辑修改用户对话框
    async showEditDialog(id) {
      // 根据id向后端提交请求，获取用户的相关数据
      const { data: res } = await this.$http.get("users/" + id);
      if (res.meta.status !== 200) {
        return this.$message.error("查询失败");
      }
      this.editForm = res.data;
      this.editDialogVisible = true;
    },

⑤：声明一个对象，用于保存后端返回的用户数据

 // 查询到的用户信息保存
      editForm: {},

⑥：表单验证

 // 修改表单的验证规则对象
      editFormRules: {
        email: [
          { required: true, message: "请输入用户邮箱", trigger: "blur" },
          { validator: "checkEmail", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入用户手机", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
      },

到这一步可以显示要修改的用户信息，原理是：把获取到的用户信息和表单进行了双向绑定，页面可以展示出相关用户的信息

⑦：给对话框绑定一个关闭事件；作用：关闭对话框后，用户的信息重置清空；下次打开时是根据id获取的最新的数据

 @close="editDialogClosed"

⑧: 实现关闭对话框函数

 // 监听添加用户对话框的关闭事件
    addDialogClosed() {
    //重置数据
      this.$refs.addFormRef.resetFields()
    },

⑨：给对话框右下角的确定按钮绑定事件；
作用：点击后，我们输入的修改后信息进行提交，更新数据

 <el-button type="primary" @click="editUserInfo">确 定</el-button>

⑩：在确定按钮事件中，通过ref引用，调用validate()，进行验证，看格式是否正确

// 修改用户信息提交
    editUserInfo() {
      //ref='editFormRef' 代表的组件实例对象vc
      this.$refs.editFormRef.validate(async (valid) = {
        if (!valid) return;
        // 验证通过发起请求
        //提交格式：路径+id+参数
        const { data: res } = await this.$http.put(
          "users/" + this.editForm.id,
          {
            email: this.editForm.email,
            mobile: this.editForm.mobile,
          }
        );
        //返回的状态码不等于200，弹出提示并退出
        if (res.meta.status !== 200) {
          return this.$message.error("更新用户失败");
        }
        //如果正确则会进入下面代码
        // ①.关闭对话框
        this.editDialogVisible = false;
        // ②.刷新数据列表
        this.getUserList();
        // ③.提示修改成功
        this.$message.success("更新用户信息成功");
      });
    },