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()
          }
        })
      }