el-form表单验证遇到的问题

如题就是使用el-form遇到的表单验证问题。
问题描述：选择了树结构中的节点，验证规则对应的字段也有值，但是还是会验证不通过提示红字。

问题原因：打开这个组件的时候，初始化了form表单，但是没有给serviceAreaname一个初始值。
解决办法：初始化的时候给form加一个初始值
表单代码如下：

<el-form
  :model="form"
  ref="form"
  :rules="rules"
  label-width="100px"
>
  <el-form-item label="服务区域：" prop="serviceAreaname">
    <el-input
      v-model="form.serviceAreaname"
      placeholder="请选择服务领域"
      @focus="focus($event)"
      @click.native="changeSelectTree()"
      readonly
      @change="$forceUpdate()"
    ></el-input>
    <div
      v-show="isShowSelect3"
      @click="cancelManager"
    ></div>
    <el-tree
      v-show="isShowSelect3"
      empty-text="暂无数据"
      node-key="id"
      :data="datalist"
      :props="defaultProps"
      @check="chooseNode"
      class="objectTree"
      ref="selectTree"
    >
    </el-tree>
  </el-form-item>
</el-form>

验证规则如下:

let validateserviceAreaname = (rule, value, callback) => {
   if (!value) {
     callback(new Error("请选择服务区域！！"));
   } else {
     callback();
   }
 };
rules: {
  serviceAreaname: [
    {
      required: true,
      validator: validateserviceAreaname,
      trigger: "change",
    },
  ],
}

选择节点改变事件代码如下：

chooseNode(node, nodes) {
  let sa = "";
  let san = "";
  //中间省略了获取值的步骤
  this.$set(this.form, "serviceArea", sa);
  this.$set(this.form, "serviceAreaname", san);
  this.$forceUpdate();
},

初始化方法（解决问题的地方！）

reset() {
  this.form = {
    serviceAreaname: "",//就是这个值，一定要有
  };
  this.resetForm("form");
}

另外，因为添加和编辑都用的这个组件，编辑的时候选择或取消节点验证规则里面的value值没有变化,如下图

原因是编辑走了接口获取值，在赋值给serviceAreaname的时候直接用了

this.form.serviceAreaname = res.serviceAreaValue

改成下面这个就行了

this.$set(
   this.form,
   "serviceAreaname",
   res.serviceAreaValue
 );