前言：
开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
弹层，form表单增删
父组件
<span class="Btn btn1" @click="more()"> 高级筛选</span>
<more ref="moreView" />
import more from './dialog/more.vue'
export default {
components: {
more
},
methods: {
more() {
this.$refs.moreView.dialogInit()
}
}
}
子组件（弹框）
<template>
<div v-if="isShow" class="door-wrap dialog-wrap">
<div class="door-inner">
<i class="el-icon-circle-close close-icon" @click="isShow = false" />
<p class="dialog-title">
高级筛选
</p>
<div class="form-wrip">
<el-scrollbar style="height:100%;">
<div class="form-contain">
<el-form
ref="dynamicValidateForm"
:model="dynamicValidateForm"
label-width="6.85rem"
>
<span class="customLabel">满足条件：</span>
<el-form-item label="">
<div class="classs">
<el-row
v-for="(item, index) in dynamicValidateForm.domains"
:key="index"
>
<img
v-if="index != 0"
src="@/assets/images/person/123.png"
class="lines"
alt=""
/>
<el-col span="5" class="select">
<el-form-item
:prop="'domains.' + index + '.attribute'"
:rules="{
required: true,
message: '属性不能为空',
trigger: 'change',
}"
>
<el-select
v-model="item.attribute"
:popper-append-to-body="false"
placeholder="选择属性"
:disabled="disableds"
filterable
@change="endTimeMethod(item.attribute, 0)"
>
<el-option
v-for="(item, index) in selectdata"
:key="index"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col span="5" class="select">
<el-form-item
:prop="'domains.' + index + '.type'"
:rules="{
required: true,
message: '类型不能为空',
trigger: 'blur',
}"
>
<el-select
v-model="item.type"
:popper-append-to-body="false"
placeholder="选择"
:disabled="disableds"
filterable
>
<el-option
v-for="item1 in weekData"
:key="item1.ids"
:label="item1.lable1"
:value="item1.ids"
/>
</el-select>
</el-form-item>
</el-col>
<el-col span="5" class="select1">
<el-form-item
:prop="'domains.' + index + '.operation'"
:rules="{
required: true,
message: '时间不能为空',
trigger: 'blur',
}"
>
<el-select
v-model="item.operation"
:popper-append-to-body="false"
placeholder="选择"
:disabled="disableds"
filterable
>
<el-option
v-for="item1 in weekData"
:key="item1.ids"
:label="item1.lable1"
:value="item1.ids"
/>
</el-select>
</el-form-item>
</el-col>
<el-col span="5" class="select1">
<el-form-item
:prop="'domains.' + index + '.pay'"
:rules="{
required: true,
message: '薪酬不能为空',
trigger: 'blur',
}"
>
<el-input v-model="item.pay" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col span="1" class="remove">
<el-tooltip
class="item"
effect="dark"
content="删除"
placement="top"
>
<el-button
class="delete"
:disabled="disableds"
@click.prevent="removeDomain(item)"
>
<i
class="el-icon-remove-outline"
style="font-size:20px;"
/>
</el-button>
</el-tooltip>
</el-col>
</el-row>
<el-button
class="add"
:disabled="disableds"
@click="addDomain"
>+条件</el-button
>
</div>
</el-form-item>
</el-form>
</div>
</el-scrollbar>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="cancel" @click="dialogVisible = false"
>取 消</el-button
>
<el-button type="primary" class="sure" @click="submitForm"
>确 定</el-button
>
</span>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
isShow: true,
dynamicValidateForm: {
id: "",
domains: [
{
id: "",
attribute: "",
type: "",
operation: "",
pay: "",
},
],
},
selectdata: [
{
name: "消费属性",
id: "1",
},
{
name: "基础属性",
id: "2",
},
{
name: "行为属性",
id: "3",
},
{
name: "风险属性",
id: "4",
},
],
};
},
methods: {
// 弹层初始化
dialogInit() {
this.isShow = true;
}, // 新增一条
addDomain() {
this.dynamicValidateForm.domains.push({
attribute: "",
type: "",
operation: "",
pay: "",
});
}, // 移除一条
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item);
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1);
}
},
},
};
</script>
<style scoped lang="scss">
::v-deep .el-empty {
height: 7.3rem;
opacity: 0.2;
}
.door-wrap {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9;
background: rgba(0, 0, 0, 0.5);
.door-inner {
width: 32.9rem;
height: 17.4rem;
margin: 3.43rem auto 0;
padding: 0.2rem 1.1rem 0.4rem;
background: url("~@/assets/images/person/dialogBg.png");
background-size: 100% 100%;
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.close-icon {
position: absolute;
right: 0.55rem;
top: 0.55rem;
color: #8ffee3;
}
.dialog-title {
text-align: center;
font-size: 0.45rem;
font-family: "Source Han Sans CN";
font-weight: 500;
color: #8ffee3;
}
.form-wrip {
position: relative;
height: 13rem;
padding-top: 2.3rem;
.form-contain {
position: relative;
.customLabel {
position: absolute;
left: 3rem;
font-size: 0.4rem;
font-family: "Source Han Sans CN";
font-weight: 400;
color: #74fae0;
line-height: 0.75rem;
}
.customLabel::before {
content: "";
position: absolute;
top: 0.35rem;
left: -0.4rem;
width: 0.17rem;
height: 0.17rem;
background: #79fae9;
box-shadow: 0rem 0rem 0rem 0rem #5cbbfa;
border-radius: 50%;
}
.lines {
position: absolute;
left: -1rem;
top: -2.01rem;
}
.el-form-item {
margin-bottom: 1.55rem !important;
}
.select {
width: 6.05rem;
margin-left: 0.5rem;
}
.select1 {
width: 3.5rem;
margin-left: 0.5rem;
}
.remove {
width: 1.5rem;
margin-left: 0.1rem;
}
::v-deep {
.el-input__inner {
font-size: 0.35rem;
font-family: Source Han Sans CN;
color: #fff;
height: 0.88rem;
background: #14313d;
border: 1px solid #357b6d;
&::-webkit-input-placeholder {
color: #4eb38c;
}
&:-ms-input-placeholder {
// IE 10 +
color: #4eb38c;
}
&:-moz-placeholder {
// Firefox 4 -18
color: #4eb38c;
}
&::-moz-placeholder {
// Firefox 19 +
color: #4eb38c;
}
}
.el-button {
width: 2.75rem;
height: 0.88rem;
background: #1f414f;
border: 1px solid #357b6d;
}
.add {
margin-left: 9rem;
color: #fff;
}
.delete {
width: 1.75rem;
height: 0.88rem;
background: transparent;
border: 0px solid transparent;
display: flex;
align-items: center;
}
.delete.el-button:focus,
.delete.el-button:hover {
color: #357b6d;
}
.el-button:focus,
.el-button:hover {
color: #fff;
}
.el-select-dropdown__wrap {
margin: 0 !important;
overflow: hidden;
}
.el-select-dropdown {
background-color: #001d26 !important;
color: #fff !important;
border: 1px solid #357b6d;
}
.popper__arrow {
border-bottom-color: transparent;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
border-bottom-color: #357b6d;
}
.el-select-dropdown__item {
color: #e4fbfe !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: rgba(53, 123, 109, 0.3);
color: #e4fbfe !important;
}
}
}
}
}
.dialog-footer {
width: 100%;
display: block;
text-align: center;
.el-button {
width: 2.93rem !important;
height: 1.15rem !important;
font-size: 0.35rem;
color: #74fae0;
border: none;
}
.cancel {
background: url("~@/assets/images/person/cancel.png") no-repeat !important;
background-size: 100% 100% !important;
}
.sure {
background: url("~@/assets/images/person/sure.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
</style>
