JS VUE 递归循环遍历渲染并实现增删功能

封装递归组件
if-condition-

<template>
    <div>
        <div v-if="dataInfo.children && dataInfo.children.length>0" class="condition-item-con">
            <div class="condition-line-con" v-if="dataInfo.children && dataInfo.children.length>1">
                <div class="condition-line"></div>
                <span class="symbol-com" @click="dataInfo.isAnd = !dataInfo.isAnd">{{dataInfo.isAnd?'且':'或'}}</span>
                <div class="condition-line"></div>
            </div>
            <div v-else class="mr-34"></div>
            <div>
                <div v-for="(child,childIndex) in dataInfo.children" :key="childIndex">
                    <div class="condition-child-con">
                        <el-cascader
                            class="first-value"
                            expand-trigger="hover"
                            :options="variableOptions"
                            :show-all-levels="false"
                            v-model="child.firstValue">
                        </el-cascader>
                        <el-select v-model="child.symbol" value-key="value">
                            <el-option v-for="(item,index) in comparison_operators_list" :key="index" :label="item.text" :value="item.value"></el-option>
                        </el-select>
                        <el-cascader
                            class="second-value"
                            expand-trigger="hover"
                            :options="variableOptions"
                            :show-all-levels="false"
                            v-model="child.secondValue">
                        </el-cascader>
                        <span>
                            <i class="iconfont iconfont-add-logic ml-8 cursor color-3C78FF" @click="handleAdd(child)"></i>
                            <i class="iconfont iconfont-delete-logic ml-8 cursor color-FA4141" @click="handleDelete(childIndex)"></i>
                        </span>
                    </div>
                    <div v-if="child.children && child.children.length>0" class="condition-item-con">
                        <ifConditionChild :dataInfo="child" :variableOptions="variableOptions"></ifConditionChild>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import language from '@/config/language'
    export default {
        name: "ifConditionChild",
        props: {
            dataInfo: Object,
            variableOptions:Array,
        },
        data() {
            return {
                language: language,
                comparison_operators_list:[//if条件组件比较符
			        {
			            text:"等于",
			            value:"=="
			        },
			        {
			            text:"不等于",
			            value:"!="
			        },
			        {
			            text:"大于",
			            value:">"
			        },
			        {
			            text:"小于",
			            value:"<"
			        }
			    ],
            }
        },
        methods:{
            /**
             * 添加标签
             * @param item 当前操作数据
             */
            handleAdd(item){
                //没有children的添加children属性
                !item.children && this.$set(item,'children',[])
                item.children && item.children.push({
                    firstValue:'',
                    secondValue:'',
                    symbol:'equal',
                    isAnd:true,
                    children:[]
                })
            },
            /**
             * 删除
             * @param index 当前操作索引值
             */
            handleDelete(index) {
                this.dataInfo.children.splice(index,1);
            },
        },
        mounted() {
            
        }
    }
</script>

部分css样式，

.component-form .condition-item-con{display: flex;align-items: stretch;justify-content: space-between;}
.component-form .condition-item-con .condition-line-con{margin-right: 14px; display: flex;flex-direction: column;align-items: center;}
.component-form .condition-item-con .symbol-com{cursor: pointer; height: 20px;width: 20px;text-align: center;line-height: 20px;background: #3C78FF;color: #fff;}
.component-form .condition-item-con .condition-line{height: calc(50% - 10px);width: 1px;background: rgba(60,120,255,0.60);}
.component-form .condition-child-con{display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;}
.component-form .condition-child-con .first-value{width: 134px;margin-right: 8px;}
.component-form .condition-child-con .el-select{width: 134px;margin-right: 8px;}
.component-form .condition-child-con .second-value{flex: 1;}
.component-form .el-input__icon {line-height: 28px;}

引用组件

<div class="component-body">
     <div class="component-con component-form">
         <div class="form-item">
             <el-form ref="dataInfo" label-position="top" label-width="150px">
                 <div >
                     <div class="mtb-8">
                         <el-input maxlength="50" class="w-220" v-model="conditionInfo.name" :placeholder="language.enter_label_placeholder"></el-input>
                         <span class="cursor" @click="addLabel">
                             <i class="iconfont iconfont-add-logic ml-8 color-3C78FF"></i>
                             <span>添加</span>
                         </span>
                     </div>
                     <v-if-condition-child :dataInfo="conditionInfo" :variableOptions="variableOptions"><-if-condition-child>
                 </div>
             </el-form>
         </div>
     </div>
 </div>


    import language from '@/config/language'
    import regex from '@/config/regex'
    import ifConditionChild from './if-condition-child'
    export default {
        name:'if-condition',
        components:{
            'v-if-condition-child':ifConditionChild
        },
        props:{
            componentData:{
                type:Object,
                default() {
                    return {
                        name: "",
                    }
                }
            },

        },
        computed:{
            isDisabled(){
                return !(this.componentData.name)
            }
        },
        data() {
            return {
                language: language,

                variableOptions:variable_option_list:[ //变量的级联选择器
			        {
			            value: 'constants',
			            name:'常量',
			            id:0,
			            children:[]
			        },
			        {
			            value: 'variables',
			            name:'变量',
			            id:1,
			            children:[]
			        },
			        {
			            value: 'expressions',
			            name:'表达式',
			            id:2,
			            children:[]
			        },
			    ],, //变量列表
                conditionInfo:{
                        name:'',
                        isAnd:true,
                        children:[
                            {
                                firstValue:'1',
                                secondValue:'',
                                symbol:'noEqual',
                                isAnd:true,
                                children:[
                                    {
                                        firstValue:'1-1',
                                        secondValue:'',
                                        symbol:'less',
                                        isAnd:false,
                                        children:[]
                                    },
                                    {
                                        firstValue:'',
                                        secondValue:'',
                                        symbol:'greater',
                                        isAnd:false,
                                        children:[]
                                    }
                                ]
                            },
                            {
                                firstValue:'2',
                                secondValue:'',
                                symbol:'equal',
                                isAnd:true,
                                children:[
                                    {
                                        firstValue:'2-2',
                                        secondValue:'',
                                        symbol:'less',
                                        isAnd:false,
                                        children:[]
                                    },
                                ]
                            }
                        ]

                    },
            }
        },
        methods: {
            /**
             * 添加
             */
            addLabel(){
                this.conditionInfo.children.push({
                    firstValue:'',
                    secondValue:'',
                    symbol:'equal',
                    isAnd:true,
                    children:[]
                })
            },
            /**
             * 删除
             * @param childIndex 当前操作索引值
             */
            deleteItemChild(childIndex){
                this.conditionInfo.children.splice(childIndex,1)
            },}}