先来上图,
默认效果如图所示
然后点击添加按钮
输入框是动态添加,并且结果表是通过是否加工控制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>
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>
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>