实现from表单的整体加减（）
1、结构简单（一层）
//遍历循环的是form里面的整个列表（数组）
<template v-for="(list, index) in form.acllist">
<el-row>
<el-col :span="16" :offset="4" style="padding-top:20px">
<i
class="el-icon-remove-outline remove-button"
//如果表单的数大于1则显示减号图标
v-if="form.acllist.length > 1"
@click="removeRule(index)"
/>
<el-form-item label="所属节点" :prop="'acllist.'+index+'.nodeId'"
:rules="[{ required: true,message: '请选择所属节点',trigger: 'change',}]">
<el-select
v-model="list.nodeId"
style="margin-left: 20px"
placeholder="请选择"
>
<el-option
v-for="(item, index) in nodes"
:key="index"
:label="item.name"
:value="item['res-id']"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="number"
:prop="'acllist.' + index + '.number'"
:rules="number"
>
<el-tooltip effect="dark" content="ACL编号范围：1000-4999，10000-10999" placement="right">
<el-input
style="margin-left: 20px; width: 265px"
v-model="list.number"
type="number"
/> </el-tooltip>
</el-form-item>
<el-form-item
label="描述"
:prop="'acllist.' + index + '.description'"
:rules="[{validator:checkData,trigger:'change'}]"
>
<el-input
style="margin-left: 20px; width: 265px"
v-model="list.description" maxlength="127" show-word-limit
/>
</el-form-item>
<i
class="el-icon-circle-plus-outline add-button"
v-if="form.acllist.length === index + 1"
@click="addRule"
/>
</el-col>
</el-row>
<el-divider/>
</template>
<script>
form: {
acllist: [
{
nodeId: '',
number: '',
nodeName: '',
description: '',
rules: [],
},
],
},
methods: {
//校验输入不能为中文
checkData(rule, value, callback) {
if (value) {
if (/[\u4E00-\u9FA5]/g.test(value)) {
callback(new Error('不能为中文！'))
} else {
callback()
}
}
callback()
},
// 表单新增配置框（点击加号时新增整个表单的内容）
addRule() {
this.form.acllist.push({
nodeId: '',
number: '',
nodeName: '',
description: '',
rules: [],
})
},
// 表单移除配置框
removeRule(index) {
this.form.acllist.splice(index, 1)
},
// 提交
async submit() {
//发起请求前进行内容检查
try {
await this.$refs.form.validate()
} catch (err) {
return
}
this.form.acllist.forEach(async element => {
const acls = await safelyGetAclById(element.nodeId)
let name = this.nodes.find(e => e['res-id'] === element.nodeId).name
element.nodeName = name
// return
if (!await safelyUpdateAcl(element)) return
})
}
},
</script>
效果图：
