vue中，表单增加一行删除一行上移一行下移一行

vue中，表单增加一行删除一行上移一行下移一行

效果

代码

index.vue

<div class="SubjectToDeclareBox">
  <p class="SubjectToDeclareMust">课题承担部门（单位）</p>
  <p class="SubjectToDeclareCon" v-for="(box, index) in formDetails.depts">
    <el-input type="text" v-model="box.orggName"></el-input>
    <el-select v-model="box.deptType" @change="inDeptType(index)">
      <el-option value="0" label="核心专业部门"></el-option>
      <el-option value="1" label="协同专业部门"></el-option>
    </el-select>
    <span class="declareOperation" @click="removeSponsor(index)">X</span>
    <span class="declareOperation" @click="upOrg(index)">↑</span>
    <span class="declareOperation" @click="downOrg(index)">↓</span>
  </p>
  <p class="SubjectToDeclareHit">{{ deptsHit }}</p>
</div>


<script>
export default {
  data() {
      return {
          formDetails: {
              depts: [{ orggId: "", orggName: "", deptType: "" }]
          } 
      }
  },
    methods:{
      inDeptType(index) {
      var message = this.verification.checkParam("课题承担部门信息", this.formDetails.depts[index].deptType, true, 0);
      if (message != null && message != "") {
        this.deptsHit = message;
        return true;
      } else {
        this.deptsHit = "";
        return false;
      }
    },
        /********************课题************************/
    // 增加课题承担部门
    addSponsor() {
      this.formDetails.depts.push({ orggId: "", orggName: "", deptType: "" })
    },
    // 移除课题承担部门
    removeSponsor(index) {
      if (this.formDetails.depts.length > 1) {
        this.formDetails.depts.splice(index, 1);
      } else {
        this.$message.error("承担方至少有一轮")
      }
    },
    // 课题承担部门上移
    upOrg(index) {
      if (index == 0) {
        this.$message.error('当前已在最顶部，无需上移！')
      } else {
        this.swapArray(this.formDetails.depts, index - 1, index);
      }
    },
    // 课题承担部门下移
    downOrg(index) {
      if (index == this.formDetails.depts.length - 1) {
        this.$message.error('当前已在最底部，无需下移！')
      } else {
        this.swapArray(this.formDetails.depts, index, index + 1);
      }
    },
   // 数据替换
   swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    }  
}
</script>
<style lang="scss">
    .SubjectToDeclareBox {
      width: 100%;
      position: relative;

      .SubjectToDeclareHit {
        position: absolute;
        margin-top: 0;
        color: #DE5647;
        font-size: 12px;
      }

      p {
        margin-top: 20px;
        font-size: 14px;
        color: #595959;
      }

      .fileUpload {
        margin-top: 20px;
      }

      .SubjectToDeclareCon {
        width: 100%;
        position: relative;

        .prospectus_Vail {
          position: absolute;
          top: 16px;
          left: 115px;

          p {
            margin-top: 0;
            color: #999;
            font-size: 12px;
            line-height: 20px;
          }
        }

        .el-input {
          width: 400px;
        }

        .declareCompany {
          width: 32px;
          height: 33px;
          display: inline-block;
          background: #4385F4;
          color: #fff;
          text-align: center;
          line-height: 26px;
          margin-left: 0px;
          margin-right: 10px;
          vertical-align: middle;
          cursor: pointer;
        }

        .declareOperation {
          color: #4385f4;
          font-size: 12px;
          line-height: 40px;
          margin: 0 8px;
          cursor: pointer;
        }
      }

      .SubjectToDeclareMust:before {
        content: '*';
        color: #DE5347;
      }
    }
      .SubjectToDeclareMust {
        font-size: 14px;
        color: #595959;
      }

      .SubjectToDeclareMust:before {
        content: '*';
        color: #DE5347;
      }
</style>

src\components\verification.js

export default {
  /**
   * Created by zhangxiaodong on 2018/11/30.
   */
  /**
   * 【描 述】：验证非法字符、长度、必填项
   *
   * @param title 字段标题
   * @param value 字段内容
   * @param isRequire 是否必填(true：必填项，false：非必填项)
   * @param length 字段限制长度(为0时无限制)
   * @param isRule 是否特殊字符校验(true：是，false：否)
   * @since  2018年11月30日 v1.0
   */
  checkParam(title, value, isRequire, length, isRule){
    const isWang = title.endsWith('wang')
    if(isWang){
      title = title.slice(0,title.length-'wang'.length)
    }
    // var reg = new RegExp("[\\\\`$^*:'\"\\<>=]");
    var reg = new RegExp("[\\\\~!@#%$^&*()+\\|}{\\[\\]\"?></'\\=\\`]"); // 测试版
    const isTitle = title.endsWith('sc')
    if(isTitle){
      title = title.slice(0,title.length-'sc'.length)
      reg = new RegExp("[\\\\~!@#%$^&*+\\|}{\"?></'\\=\\`]"); // 申请表字段名称特殊字符版
    }
    // var reg = new RegExp("[\\\\~!@#%$^&*()_+\\|}{\\[\\]\":?><,./;'\\=\\-`]");
    // var reg = new RegExp("[\\\\!@#$%^&*()_+|}{\":?><,\./;'=\\-`~！￥……（）——｝｛“”：？》《，。、；‘【】’·]");
    // var reg = new RegExp("[\\\\!#$%^&*()+|}{\":?><,/;'=\\`~￥｝｛·]");
    var reg1 = /^\s|\s$/;
    var reg2 = /\s/;
    if (isRequire && (!value || value.length == 0)) {//如果为必填项且内容长度为0
      return title + "不能为空！";
    }else if(value && value.length>0){
      var regEng = value.trim().toLowerCase();
      if(value.trim().length==0){
        return title+"不应只输入空格";
      }else
      //   if(reg1.test(value)){
      //   return title+"首尾不应输入空格";
      // }else
      //   if(reg2.test(value.replace(/(^\s*)|(\s*$)/g,''))){
      //   return title+"中间内容不可包含空格";
      // }else
        if (length > 0 && value && value.length > length) {
        return title + "最多" + length + "个字符！";
      } else if ((isRule == undefined || isRule) && value && value.length > 0) {
        if (reg.test(value) && !isWang) {
          return title + "不能包含特殊字符！";
        } else if(regEng == 'null'){
          return title + "不能输入null！";
        }
      }
    }
    return null;
  },
  checkSpecial(title,val,len){
    // var reg = new RegExp("[\\\\`$^*:'\"\\<>=]");
    var reg = new RegExp("[\\\\!#$%^&*()+|}{\":?><,/;'=\\`~￥｝｛·]");
    if(val.length>len){
      return  {title:val.slice(0,len),check:title+"最多" + len + "个字符！"}
    }
    return {title:val.replace(reg,""),check:""};
  },
  checkSearch(title, value, isRequire, length, isRule){
    // var reg = new RegExp("[\\\\%`$^*:_'\"\\<>=]");
    // var reg = new RegExp("[\\\\~!@#%$^&*()+\\|}{\":?><,./;'\\=\\-`]");
    // var reg = new RegExp("[\\\\!@#$%^&*()_+|}{\":?><,./;'=\\-`~！￥……（）——｝｛“”：？》《，。、；‘【】’·]");
    var reg = new RegExp("[\\\\!#$%^&*()+|}{\":?><,/;'=\\`~￥｝｛·]");
    var reg1 = /^\s|\s$/;
    if (isRequire && (!value || value.length == 0)) {//如果为必填项且内容长度为0
      return title + "不能为空！";
    }else if(value && value.length>0){
      var regEng = value.toLowerCase();
      if(value.trim().length==0){
        return title+"不应只输入空格";
      }else if(reg1.test(value)){
        return title+"首尾不应输入空格";
      }else if (length > 0 && value && value.length > length) {
        return title + "最多" + length + "个字符！";
      }
      else if ((isRule == undefined || isRule) && value && value.length > 0) {
        if (reg.test(value)) {
          return title + "不能包含特殊字符！";
        }else if(value == 'null' || value == 'NULL'){
          return title + "不能输入null！";
        }
      }
    }
    return null;
  },
  // var message = this.verification.checkParam('发送消息',this.messageContent,true,3);
  // if (message != null) {
  //   this.$message.error(message)
  //   return false
  // } else {
  //   return true
  // }
//身份证校验
  identityCode(title,code) {
    var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};
    // return code;
    var tip = "";
    var pass= true;
    if(code){
      if(!code || !/^\d{6}(18|19|20|30)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){
        tip = title + "格式错误";
        pass = false;
      }else if(!city[code.substr(0,2)]){
        tip = title + "地址编码错误";
        pass = false;
      }else{
        //18位身份证需要验证最后一位校验位if(code.length == 18){
        code = code.split('');
        //∑(ai×Wi)(mod 11)//加权因子
        var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
        //校验位
        var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
        var sum = 0;
        var ai = 0;
        var wi = 0;
        for (var i = 0; i < 17; i++){
          ai = code[i];
          wi = factor[i];
          sum += ai * wi;
        }
        var last = parity[sum % 11];
        if(parity[sum % 11] != code[17]){
          tip = title + "校验位错误";
          pass =false;
        }
      }
    }else{
      tip = title + "不能为空！";
      pass = false;
    }
    if(!pass) return tip;
  }
}