element便利校验，this.$set用法，banner图切换位置

需求原型：
主要涉及的问题：
1.列表便利校验
2.换位的this.$set函数；
话不多说上代码，方便你我他

//主要代码
<el-form :model="formdata" ref="form" size="small" label-width="120px">
      <div v-for="(banner, i) in formdata.BannerList" :key="i">
        <el-col :span="6">
          <el-form-item
            :prop="'BannerList.' + i + '.IMAGE_URL'"
            label-width="0px"
          >
            <div class="thumb">
              <w-upload
                class="thumb-upload"
                :limit-size="10 * 1024 * 1024"
                :limit-size-message="'文件过大，请上传 10Mb 以内的文件'"
                :limit-ext="['jpg', 'jpeg', 'png', 'gif']"
                :ext-data="{ i }"
                :on-success="IMAGE_URL_handle"
              >
                <img
                  :src="banner.IMAGE_URL | downloadUrl"
                  v-if="banner.IMAGE_URL != ''"
                />
                <div class="thumb-cover" v-else>
                  <div class="thumb-btn">
                    <i class="el-icon-upload"></i>
                    点击上传图片
                  </div>
                </div>
              </w-upload>
            </div>
            <div class="text-center">
              <span class="mr10 cursor" @click="toUp(i)"
                ><i class="el-icon-top"></i>上移</span
              ><span class="mr10 cursor" @click="toBottom(i)"
                ><i class="el-icon-bottom"></i>下移</span
              ><span class="cursor" @click="deleteBanner(i)"
                ><i class="el-icon-delete"></i>删除</span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-row :gutter="rowGutter">
            <el-col :span="12">
              <el-form-item
                label="名称"
                :prop="'BannerList.' + i + '.INTERMEDIARYCODE'"
              >
                <el-input
                  v-model="banner.INTERMEDIARYCODE"
                  placeholder="请输入名称"
                  :maxlength="100"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="发布机构"
                :prop="'BannerList.' + i + '.INTERMEDIARYNAME'"
              >
                <el-input
                  v-model="banner.INTERMEDIARYNAME"
                  placeholder="请输入中介人名称"
                  :maxlength="50"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="rowGutter">
            <el-col :span="12">
              <el-form-item
                label="许可证起期"
                :prop="'BannerList.' + i + '.LICENSE_START'"
              >
                <el-date-picker
                  v-model="banner.LICENSE_START"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择许可证起期"
                  type="date"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="许可证止期"
                :prop="'BannerList.' + i + '.LICENSE_END'"
              >
                <el-date-picker
                  v-model="banner.LICENSE_END"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择许可证止期"
                  type="date"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="rowGutter">
            <el-col :span="24">
              <el-form-item
                label="链接"
                :prop="'BannerList.' + i + '.PRODUCTURL'"
                :rules="formrule.PRODUCTURL"
              >
                <el-input
                  v-model="banner.PRODUCTURL"
                  placeholder="请输入链接"
                  :maxlength="100"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </div>
    </el-form>
 <script>
data() {
    return {
      rowGutter: 10,
        BannerList: [
          {
            INTERMEDIARYCODE: '123',
            INTERMEDIARYNAME: '123',
            LICENSE_START: '123',
            LICENSE_END: '123',
            PRODUCTURL: '',
            IMAGE_URL: '',
          },
          {
            INTERMEDIARYCODE: '456',
            INTERMEDIARYNAME: '456',
            LICENSE_START: '456',
            LICENSE_END: '456',
            PRODUCTURL: '',
            IMAGE_URL: '',
          },
          {
            INTERMEDIARYCODE: '789',
            INTERMEDIARYNAME: '789',
            LICENSE_START: '789',
            LICENSE_END: '789',
            PRODUCTURL: '',
            IMAGE_URL: '',
          },
        ],
      },
      formrule: {
        PRODUCTURL: [
          { required: false, message: '请填写链接地址' },
          {
            pattern: /(http|https|HTTP|HTTPS):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/,
            message: '请填写正确格式',
          },
        ],
      },
    };
  },
  methods: {
    IMAGE_URL_handle(res, file, fileList, extData) {
      console.log(res, file, fileList, extData);
    },
    toUp(index) {
      console.log('111111111', index);
      this.changeLocation('up', index);
    },
    toBottom(index) {
      console.log('222222222222222', index);
      this.changeLocation('bottom', index);
    },
    deleteBanner(index) {
      this.formdata.BannerList.splice(index, 1);
    },
    changeLocation(location, index) {
      console.log(location, index);
      if (location == 'up' && index > 0) {
        const tmp = this.formdata.BannerList[index];
        this.$set(
          this.formdata.BannerList,
          index,
          this.formdata.BannerList[index - 1]
        );
        this.$set(this.formdata.BannerList, index - 1, tmp);
        // this.formdata.BannerList[index] = this.formdata.BannerList[index - 1];
        // this.formdata.BannerList[index - 1] = tmp;
        console.log(this.formdata.BannerList);
      } else if (
        location == 'bottom' &&
        index < this.formdata.BannerList.length
      ) {
        const tmp = this.formdata.BannerList[index];
        this.$set(
          this.formdata.BannerList,
          index,
          this.formdata.BannerList[index + 1]
        );
        this.$set(this.formdata.BannerList, index + 1, tmp);
        console.log(this.formdata.BannerList);
      }
    },
  },
</script>

如果你只是先看list的便利校验方法直接看这里，重点已进行标注

2.this.$set 用法