v-for动态渲染数组，增减数组后页面高度不发生变化的原因——与页面添加的水印有关！！！

最近在做需求的过程当中，碰到了这样一个问题，Vue框架的页面，使用v-for循环出form表单，并且可以对每一块的表单做动态删除。就发现在删除v-for循环的数组后，页面会更新，但是页面底部会留下所删除数组的高度；
下面是代码

// html部分
其实就是很简单的for循环生成一个数组
<div class="cc">
    <h1>c页面</h1>
    <el-button type="primary" @click="addForm">增加form表单</el-button>    // 增加表单
    <div  v-if="type">     // 控制表单是否展示
      <div v-for="(item, index) in list" :key="index" class="form">
        <el-button @click="deleteForm(index)">删除</el-button>
        <el-form :model="item" ref="formValid" :rules="rules"  class="demo-ruleForm" >  
          <el-form-item label="请输入姓名" prop="name">
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item label="请选择" prop="gender" >
            <el-checkbox-group v-model="item.gender">
                 <el-checkbox label="男"></el-checkbox>
                 <el-checkbox label="女"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <el-button @click="submit" >提交</el-button>
    </div>
    <div class="content">测试1</div>
    <div class="content">测试2</div>
  </div>

遇到的问题是。点击增加表单按钮，增加是没问题的，但是删除后，在页面底部会出现一块空白区域，感觉表述的有的困难，看图吧

操作的方法

import { refreshWatermark } from "@/utils/fn";

export default {
  data() {
    return {
      type: false,
      list: [],
      obj: {
        name: "",
        gender: [],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名字",
            trigger: ["blur", "change"],
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    addForm() {
      this.type = true;
      this.list.push(JSON.parse(JSON.stringify(this.obj)));
      refreshWatermark() // 增加表单后需要重置调用水印方法渲染  如果不加这个，增加表单后，页面底部不会有水印，这个水印的方法初始化时，只对页面存在的内容渲染，如果内容变化，不会重新渲染
    },
    deleteForm(index) {
      this.list.splice(index, 1);
    },
    submit() {
        const list = []
        for (let i = 0; i < this.list.length; i++) {
            this.$refs["formValid"][i].validate((valid) => {
                if (valid) {
                    list.push(true)
                }
            })
            
        }
        if (list.length === this.list.length) {
            alert('校验通过')
        }else {
            this.type = false
            alert("校验失败，请确认")
        }
    }
  },
};
</script>

引入的添加水印的方法 需要可以安装watermark-dom；命令:npm install watermark-dom
时间我是用的day.js 安装:npm i dayjs 方法都可以参考文档，多看几遍就会熟悉了

import watermark from "watermark-dom";
import dayjs from "dayjs";
let refreshFunc = null;
/**
 * 刷新水印
 */
export function refreshWatermark() {
  setTimeout(function () {
    refreshFunc();
  }, 0);
}
// 添加水印
export function initWater() {
  let date = dayjs(Date.now()).format("YYYY-MM-DD");
  let username = 'echo';
  let timer = null;
  timer && clearTimeout(timer);
  const initData = {
    watermark_txt: username + "  " + "  " + date,
    watermark_width: 100,
    watermark_height: 38,
    watermark_angle: 20,
    watermark_fontsize: "16px",
    watermark_alpha: 0.1,
    watermark_x: 110,
    watermark_y: 80,
    watermark_x_space: 25, //水印x轴间隔
    watermark_y_space: 20, //水印y轴间隔
  };
  timer = setTimeout(() => {
    watermark.init(initData);
  }, 600);
  refreshFunc = function () {
    watermark.load(initData);
  };
}

这里就是这里在底部一直会有这个空白的区域，尝试过的方法：
1.给最外层的div加上v-if,每次删除的时候重置一下它的依赖值，起到页面重新渲染的作用，失败（此处其实页面在list这个数组变化后已经起到了重新渲染的作用)
2.给v-for循环的div加上key值，这里的key用Math.random()生成一个随机数，失败(此处的key是唯一的，与上面原因类似，list变化后，会造成数据重新更新渲染)
3.找百度了，然后没有。感觉不是代码的问题，百度了好久都没找到问题，后面想删除水印发朋友看看（水印带有公司信息，不变透露,想不到这样试了就可以了。。。。)

其实原因很简单:引入的添加水印的方法：只会渲染页面已存在内容的水印，如果对内容做动态删减，则不会渲染，也会占一部分的空间，但是打开调试时找不到这块区域的。后面其实在删除后调用重新渲染水印的方法就可以了增加这个方法就可以了

deleteForm(index) {
      this.list.splice(index, 1);
      refreshWatermark()
    },

写的有点乱，大家见谅，不过这个问题感觉遇到的人不会很多。。。。。