el-form动态增减数据的问题，编辑时候input输入不了

新增的时候可以展示，但是编辑在点+新增就没有效果

原因：改变了数组内的值，但是页面没有重新渲染

        <el-form-item label="信息:" required>
            <div style="display: flex; align-items: flex-end">
              <div>
                <el-form
                  :model="form"
                  ref="watchRef"
                  inline
                  :hide-required-asterisk="false"
                >
                  <div
                    v-for="(item, index) in form.supervisionList"
                    :key="item.key"
                    class="supervisionitem"
                  >
                    <!--  :prop="'supervisionList.' + index + '.supervisionLinkman'" -->
                    <el-form-item
                      :prop="'supervisionList.' + index + '.supervisionLinkman'"
                      :rules="{
                        required: true,
                        message: '请填写姓名',
                        trigger: 'blur',
                      }"
                    >
                      <el-input
                        v-model="item.supervisionLinkman"
                        style="width: 145px"
                        placeholder="姓名"
                        maxlength="10"
                        :disabled="!!id && !row.showOperation"
                      ></el-input>
                    </el-form-item>
                    <!-- prop="supervisionMobile" -->
                    <!-- {{ form.supervisionList[index].supervisionMobile }} -->
                    <!-- prop="supervisionMobile"  'supervisionList.' + index + '.supervisionMobile'-->
                    <el-form-item
                      :prop="'supervisionList.' + index + '.supervisionMobile'"
                      :rules="supervisionMobileRules"
                    >
                      <el-input
                        v-model="item.supervisionMobile"
                        style="width: 247px"
                        placeholder="联系电话"
                        :disabled="!!id && !row.showOperation"
                      ></el-input>
                      <span
                        class="del add pointer"
                        @click.prevent="delSupervision(item)"
                        v-if="index > 0"
                      >
                        -
                      </span>
                    </el-form-item>
                  </div>
                </el-form>
              </div>
              <div
                class="add pointer"
                @click="addSupervision"
                :style="
                  !!id && !row.showOperation ? 'pointer-events:none;' : ''
                "
              >
                +
              </div>
            </div>

            <!-- <el-form
              :model="form"
              :rules="watchRules"
              ref="watchRef"
              inline
              :hide-required-asterisk="false"
            >
              <el-form-item prop="supervisionLinkman">
                <el-input
                  v-model="form.supervisionLinkman"
                  style="width: 145px"
                  placeholder="姓名"
                  maxlength="10"
                  :disabled="!!id && !row.showOperation"
                ></el-input>
              </el-form-item>
              <el-form-item prop="supervisionMobile">
                <el-input
                  v-model="form.supervisionMobile"
                  style="width: 247px"
                  placeholder="联系电话"
                  :disabled="!!id && !row.showOperation"
                ></el-input>
              </el-form-item>
            </el-form> -->

            <!-- <div class="alignFlex">
              <el-input
                v-model="form.frName"
                style="width:145px;margin-right:8px"
                placeholder="姓名"
              ></el-input>
              <el-input
                v-model="form.frPhone"
                style="width:247px"
                placeholder="联系电话"
              ></el-input>
            </div> -->
          </el-form-item>

    addSupervision() {
      this.form.supervisionList.push({
        supervisionLinkman: "",
        supervisionMobile: "",
        key: Date.now(),
      });
       this.$forceUpdate();
    },
    delSupervision(item) {
      console.log(item, "item");
      console.log(this.form.supervisionList, "this.form.supervisionList");
      var index = this.form.supervisionList.indexOf(item);
      if (index !== -1) {
        this.form.supervisionList.splice(index, 1);
        this.$forceUpdate();
      }
    },

this.$forceUpdate()强制刷新
在新增就可以展示出来

如果是在对象中添加属性修改属性this.$set(this.object,'age',21)
如果是对数组的操作：
1.数组splice方法
2.this.$forceUpdate()强制刷新
3.this.$set使用如下

      this.$set(this.form.supervisionList, this.form.supervisionList.length, {
        supervisionLinkman: "",
        supervisionMobile: "",
        key: Date.now(),
      });

但是我的好像只能用this.$forceUpdate()强制刷新，具体啥原因我也不太清楚

但是this.$forceUpdate()会导致校验失效

最后发现是在详情赋值时出问题了

详情接口
this.form = res.data;
  this.form.supervisionList = res.data.supervisionManList.map((v) => ({
              supervisionLinkman: v.userName,
              supervisionMobile: v.phone,
            }));

就会导致编辑时候input不能编辑，恶性循环网上查询都是强制刷新，导致问题一直没有解决
上来给input赋值会导致vue数据双向绑定失效
以后有动态增加的时候，需要先赋值给新的变量，在新的变量上处理，再赋值给this.form，不破坏数据双向绑定
el-form动态增加跟vue配合的一个坑【具体为啥不太清楚，只知道解决方法】

详情接口
let temp = res.data;
  this.form.supervisionList = res.data.supervisionManList.map((v) => ({
              supervisionLinkman: v.userName,
              supervisionMobile: v.phone,
            }));
this.form = temp