element-ui动态增加表单项并验证_element表单模块里面实现一个按钮 通过点击可以添加一个模块在表单上

先来上图，

默认效果如图所示

然后点击添加按钮


输入框是动态添加，并且结果表是通过是否加工控制DOM元素的加载。
点击删除回到最初。

下面上代码
template

<!-- 动态增加表单项 -->
    <el-form-item id="make_group" v-for="(item, index) in ruleForm.group" :key="index" :class="ruleForm.group.length > 1 ? 'active' : ''">
    <!-- 按钮通过定位显示在表单右侧 默认删除按钮不显示，当数组长度大于一则显示 -->
      <div class="handle_button">
        <el-button type="text" @click="add"> 添加 </el-button>
        <el-button type="text" v-show="ruleForm.group.length > 1" @click="remove(index)">删除</el-button>
      </div>
      <!-- 验证:prop="'数组.'+下标+'.表单绑定的值'" -->
      <el-form-item label="存储类型 :" :prop="'group.'+index+'.originType'" :rules="[
            { required: true, message: '请选择存储类型' },
          ]">
          <!-- 这里是经过二次封装的element的select框  -->
        <Select :selectList="dataOrigin" @handleSelectItem="handleOriginType" />
      </el-form-item>
      <!-- v-if控制DOM元素是否存在 -->
      <el-form-item v-if="ruleForm.process == '2'" :prop="'group.'+index+'.resultList'" label="结果表 :" class="el_form_item" :rules="[
            { required: true, message: '请选择结果表', trigger: 'blur' },
          ]">
        <Select multiple filterable :selectList="resultList" @handleSelectItem="handleResult" />
      </el-form-item>
    </el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

JS

<script>
import Select from "./components/Select"
export default {
  	components: {
    	Select
  	},
  	data(){
  		return{
			// 表单数据
	      ruleForm: {
	        name: "",
	        region: "",
	        process: 1,
	        // 动态表单项
	        group: [{
	          originType: "",
	          resultList: [],
	        }, ],
	      },
		}
  	},
  	methods: {
    // 添加表单项
    add() {
      this.ruleForm.group.push({
        originType: "",
        resultList: "",
      });
    },
    // 根据下标删除表达项
    remove(index) {
      this.ruleForm.group.splice(index, 1);
    },
    handleOriginType(item) {
      // console.log(item)
      this.ruleForm.group[0].originType = item
    },
    handleResult(item) {
      // console.log(item)
      this.ruleForm.group[1].resultList = item
    }
  },
  }
</script>
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

sclect组件

<template>
<el-select v-model="value" :multiple="multiple" :filterable="filterable" :placeholder="placeholder" :multiple-limit="multipleLimit" :clearable="clearable" :size="size" @change="handleSelectItem">
  <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
  </el-option>
</el-select>
</template>

<script>
export default {
  props: {
    // 下拉列表
    selectList: {
      type: Array,
      default: () => [],
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 多选时用户最多可以选择的项目数，为 0 则不限制
    multipleLimit: {
      type: Number,
      default: 0,
    },
    // 是否可以搜索
    filterable: {
      type: Boolean,
      default: false,
    },
    // 占位文本
    placeholder: {
      type: String,
      default: "请选择",
    },
    // 是否可以清空选项
    clearable: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      value: !this.multiple ? '' : [],
    };
  },
  created() {

  },
  methods: {
    handleSelectItem() {
      this.$emit("handleSelectItem", this.value);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

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
61
62
63
64