Element ui 动态增减表单项_elementui动态增减表单项

Element ui 动态增减表单项

可以参考Element ui 官网
注意prop值

 <el-form
        :inline="true"
        class="demo-form-inline"
        ref="orRuleForm"
        :model="orRuleForm"
        label-width="100px"
      >
        <div v-for="(every, index) in orRuleForm.orFormList" :key="index">
          <el-form-item
            label="字段名"
            :prop="'orFormList.' + index + '.name'"
            :rules="orNameRules"
          >
            <el-input v-model="every.name"></el-input>
          </el-form-item>
          <el-form-item
            label="逻辑规则名"
            :prop="'orFormList.' + index + '.logicRulesName'"
            :rules="orlogicRulesRules"
          >
            <el-select
              @focus="getDenfineOption"
              v-model="every.logicRulesName"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in denfineOption"
                :key="index"
                :label="item.dsdfName"
                :value="item.dsdfId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            class="compareClass"
            label="比较对象"
            :prop="'orFormList.' + index + '.compareObject'"
            :rules="orCompareObjectRules"
          >
            <el-input v-model="every.compareObject"></el-input>
            <div class="addDelete" v-if="clickType == 'or'">
              <i
                v-if="index == orRuleForm.orFormList.length - 1"
                @click="addOrHanlder"
                class="el-icon-circle-plus-outline"
              ></i>
              <i
                v-if="index !== orRuleForm.orFormList.length - 1"
                @click="deleteOrHandler(every, index)"
                class="el-icon-remove-outline"
              ></i>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rangeCancel">取 消</el-button>
        <el-button type="primary" @click="orSaveHandler">保 存</el-button>
      </span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

 //定义表单项
 orRuleForm: {
        orFormList: [
          {
            name: "",
            logicRulesName: "",
            compareObject: "",
          },
        ],
      },
      //验证规则
     orNameRules: [
        { required: true, trigger: "blur", validator: checNumber30 },
      ],
      orCompareObjectRules: [
        { required: true, trigger: "blur", validator: checNumber30 },
      ],
      orlogicRulesRules: [
        {
          required: true,
          message: "请选择逻辑规则",
          trigger: "change",
        },
      ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

    //表单新增行
    addOrHanlder() {
      let obj = {
        name: "",
        logicRulesName: "",
        compareObject: "",
      };
      this.orRuleForm.orFormList.push(obj);
    },
    //表单删除行
    deleteOrHandler(every, index) {
      this.orRuleForm.orFormList.splice(index, 1);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

//图标样式
.addDelete {
  position: absolute;
  top: 10px;
  right: -25px;
  display: flex;
  flex-direction: column;
  i {
    font-size: 18px;
    flex: 1;
  }
  .el-icon-circle-plus-outline {
    color: #2d8cf0;
  }
  .el-icon-remove-outline {
    color: red;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18