实现整个from表单的整体加减（）

实现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>