背景描述

有这样一个页面, 给 " 实体1" 和 “实体2” 的四个下拉框都加了watch.

表单逻辑:
有很多个不同的本体, 本体下面又有不同的实体
.

1. 第1步选择完本体后, 调用接口获取本体下对应的实体列表 (使用对象数组保存实体的名称和id), 展示在第2步的下拉框中, 让用户选择实体.
2. 用户选择完实体后, 保存对应的实体id和实体名称

错误说明:
新增的时候是正常的, 但是编辑的时候下拉框的数据总是要等一段时间才能正常显示, 就是因为编辑时给表单赋值触发了 watch

data中的表单内容:

      form: {
        onto1: "",
        entity1: "",
        onto2: "",
        entity2: "",
        rela: "",
        desc: "",
      }

修改方法

1. 在data中加了一个标志位 useWatch, 用来表示使不使用 watch. 默认是使用的 (true).

2. 在编辑页面给form表单赋值时, 关闭 watch, 赋值完成后再打开.

3. 如果直接在代码中从上到下写明 表单赋值的过程 和 useWatch = true, 会因为走 watch 的时间太长导致在表单赋值完之前就走完了 useWatch = true, 问题还是存在. 所以这里用 async 和 await 保证表单赋值完成后再把 useWatch 设置为 true

data(){
	return {
		...
		useWatch: true
	}
}

watch: {
    // 新增或者编辑的时候监听用户选择的本体, 本体变化时调用方法获取当前本体对应的实体列表
    "form.onto1": {
      handler(newOnto, oldOnto) {
        if (this.useWatch) {  // useWatch为true时才执行后面的过程
          this.form.entity1 = "";
          if (newOnto != oldOnto) {
            this.getEntityList(newOnto);
          }
        }
      },
      deep: true,
    },
    ...
}

页面编辑按钮:

		<template slot-scope="scope">
 			  <el-button
              type="button"
              size="small"
              @click.stop="editOntoRela(scope.row)"
              class="loginButtonColor"
              ><p class="el-icon-edit"></p>
              编辑
            </el-button>
            ...
        </template>

methods:

	/**编辑 */
    async editOntoRela(row) {
      this.useWatch = false;

      this.entityrelaKey = "";

      // 表单赋值
      let result = await this.fz(row);

      // 保存当前的key
      this.entityrelaKey = row._key;

      this.$forceUpdate();
      this.isAdd = false;
      this.dialogAddKnowledgeVisible = true;

      if (result == 1) {
        this.useWatch = true;
      }
      
    },
    fz(row) {
      this.form.onto1 = row["本体1"];
      this.form.entity1 = row["实体1"];
      this.form.onto2 = row["本体2"];
      this.form.entity2 = row["实体2"];
      this.form.desc = row["描述"];
      this.form.rela = row["关系"];
      return 1
    },

个人觉得这种方法可能不是最好的方式, 希望有大佬可以指点一下.