主要是记录，以备不时之需。
效果图：
多级动态增删.png
不多说，直接上代码。可以直接用vue-cli构架项目粘贴复制就可以使用。
组件代码如下：
<template>
<div>
<div class="testComponents" v-for="(item,index) in data" :key="index">
<el-select v-model="andOr" placeholder="请选择" size="mini" v-if="!!item.andOr" style="width:100px;">
<el-option label="and" value="and"></el-option>
<el-option label="or" value="or"></el-option>
</el-select>
<div class="group-content_row">
<el-select v-model="item.form" placeholder="请选择" size="mini" :style="{'width': 200 - 30 * (item.floor - 1) + 'px', 'margin-left': 30 * (item.floor - 1) + 'px'}">
<el-option v-for="item in formList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="item.type" placeholder="请选择" size="mini" :style="{width:'100px'}">
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="item.value" placeholder="请选择" size="mini">
<el-option v-for="item in valueList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<i class="el-icon-circle-plus" @click="addItem(item)" v-show="item.floor < maxFloor"></i>
<i class="el-icon-remove" @click="deleteItem(data,index)" v-show="item.floor !== 1"></i>
<div v-show="item.floor !== 1" class="content_row-guide" :style="{'left': 13 + 30 * (item.floor - 2) + 'px'}"></div>
<testComponents :formList="formList" :valueList="valueList" :data="item.children" />
</div>
<div :class="{'floor-line':item.floor !== 1 && data.length > index+1}" :style="{'left':13 + 30 * (item.floor-2) + 'px','top':data.length === index + 1 ? '-14px' : ''}"></div>
</div>
</div>
</template>
<script>
export default {
name: 'testComponents',
props: {
data:{
type: Array,
default () {
return [{ //初始数据
floor: 1,
presetVal: '',
andOr: 'and',
children: []
},]
}
},
//最大层级
maxFloor:{
type: Number,
default () {
return 4
}
},
formList:{
type: Array,
default () {
return []
}
},
valueList:{
type: Array,
default () {
return []
}
}
},
data() {
return {
andOr: 'and',
typeList: [{
value: 'range',
label: '范围'
}, {
value: 'equal',
label: '等于'
}, {
value: 'notEqual',
label: '不等于'
}],
}
},
methods:{
addItem(item){
item.children.push({
floor: item.floor + 1,
presetVal: '',
children: []
})
},
deleteItem(dataList,index){
dataList.splice(index,1)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.testComponents{
position: relative;
.group-content_row{
margin-top: 10px;
position: relative;
& > div{
margin-right: 10px;
}
.content_row-guide{
position: absolute;
top: -10px;
padding: 12px 8px;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
}
.floor-line{
position: absolute;
border-left: 1px solid #ccc;
top: 0;
height: 100%;
}
}
</style>
使用代码如下：
<template>
<div class="testPage">
<el-button-group>
<el-button size="mini" type="primary" @click="addGroup">addGroup</el-button>
<el-button size="mini" type="primary" @click="clearData">clearData</el-button>
<el-button size="mini" type="primary" @click="search">search</el-button>
</el-button-group>
<TestComponents style="width:70%;margin:50px auto;" :formList="formList" :valueList="valueList" :data="componentData.children" />
</div>
</template>
<script>
import TestComponents from './../components/TestComponents.vue'
export default {
name: 'TestPage',
components:{
TestComponents
},
data () {
return {
componentData: {
children: [
{ //初始一级数据
floor: 1,
presetVal: '',
andOr: 'and',
type: '',
form: '',
value: '',
children: [
{ //二级数据
floor: 2,
presetVal: '',
type: '',
form: '',
value: '',
children: [
{ //二级数据
floor: 3,
presetVal: '',
children: [],
type: '',
form: '',
value: '',
},
]
},
{ //二级数据
floor: 2,
presetVal: '',
type: '',
form: '',
value: '',
children: [
{ //三级数据
floor: 3,
presetVal: '',
type: '',
form: '',
value: '',
children: [
{ //四级数据
floor: 4,
presetVal: '',
type: '',
form: '',
value: '',
children: []
},
]
},
]
},
{ //二级数据
floor: 2,
presetVal: '',
children: [],
type: '',
form: '',
value: '',
},
]
},
]
},
formList: [{
value: '1',
label: 'form1'
}, {
value: '2',
label: 'form2'
}, {
value: '3',
label: 'form3'
}],
valueList: [{
value: '1',
label: 'value1'
}, {
value: '2',
label: 'value2'
}, {
value: '3',
label: 'value3'
}],
}
},
methods: {
addGroup(){
this.componentData.children.push({ //一级数据
floor: 1,
presetVal: '',
children: [],
andOr: 'and',
})
},
clearData(){
},
search(){
alert(JSON.stringify(this.componentData));
}
}
}
</script>
里面的下拉框可以根据需求修改为任何表单元素。每行元素个数根据自己项目来修改，左侧折线样式可能需要有点耐心做调整。
复制粘贴用不了，找我，免费被打。如果是你的问题，嘿嘿~
OK!dawanshougong！
网友评论