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: #; } .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: #; } .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; } } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10672.html