标签：vue form watch 表单 太慢 true useWatch row

背景描述

有这样一个页面, 给 " 实体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
    },

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

标签：vue,form,watch,表单,太慢,true,useWatch,row
来源： https://blog.csdn.net/Charonmomo/article/details/121292585

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。