el-form和el-select的使用

**1、el-form属性和事件 :model=“addForm” 绑定表单数据 :rules="addFormRules"绑定自定义校验规则

ref=“addFormRef” 用于表单校验

// 监听添加任务对话框的关闭事件
      addDialogClosed () {
          
   
        this.$refs.addFormRef.resetFields()
      },

2、el-input数据绑定

上图三处需要一致，prop="taskName"不能省，否则重置表单无法生效。可以直接在addForm中给taskName赋默认值。

3、el-select数据绑定 同样，v-model=“addForm.priceModel"要与addForm里的数据一致；@change=”$forceUpdate()"使得下拉框内容可变； price_option对应下拉框的可选值，在data中需要定义。

4，发起表单请求

addUser () {
          
   
        this.$refs.addFormRef.validate(async valid => {
          
   
          if (valid) {
          
   
            // 可以发起添加任务的网络请求
            const {
          
    data: res } = await this.$http.post(tasks/add, this.addForm)
            if (res.code !== 201) {
          
   
              this.$message.error(添加任务失败！)
            }
            this.$message.success(添加任务成功！)
            // 隐藏添加用户的对话框
            this.addDialogVisible = false
            // 重新获取用户列表数据
            this.getTaskList()
          }
        })
      }