vuejs - - - - - 递归组件的实现

1. 需求描述：

1. 点击添加行，增加一级目录结构
2. 当类型为object or array时，点击右侧➕，增加子集
3. 点击右侧🚮，删除对应子集

2. 效果图：

3. 代码

3.1 封装组件代码

<template><template v-if="!!currentLevelData.length"><div class="mt10" v-for="(item, index) in currentLevelData" :key="`${deep}-${index}`"><div class="flex flex-align-center"><!-- key --><div class="common mr10 border-box" :style="{ paddingLeft: (deep - 1) * 10 + 'px' }"><a-input v-model:value="item.key" placeholder="请输入key" /></div><!-- type --><div class="type mr10"><a-selectref="select"v-model:value="item.type"class="full-width"@change="handleChange($event, item)"><a-select-option v-for="t in dataType" :value="t" :key="t">{{ t }}</a-select-option></a-select></div><!-- value --><div class="common mr10"><a-textarea:rows="1"placeholder="请输入参考值"v-model:value="item.value":disabled="objectFile.includes(item.type)"/></div><!-- desc --><div class="common mr10"><a-textarea :rows="1" placeholder="请输入备注" v-model:value="item.desc" /></div><!-- 删除按钮 --><div class="flex"><delete-outlined class="ml5" @click="deleteTarget(index)" /><!-- 添加子集 --><plus-outlinedclass="ml5"v-show="objectFile.includes(item.type)"@click="addSubset(item)"/></div></div><template v-if="!!item.child?.length"><!-- 组件递归 --><CustomInputGroup :deep="deep + 1" :list="item.child" /></template></div></template>
</template>
<script lang="ts" setup>
import CustomInputGroup from './index.vue';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';const dataType = ['string', 'number', 'boolean', 'object', 'array', 'file']; // 所有的类型const props = defineProps({list: {type: Array,default: () => [],},deep: {type: Number,default: 1,},
});const objectFile = ['object', 'array']; // 可以有下一级结构的类型interface paramsItem {key: string;type: string;value: string;desc: string;child?: any;
}// currentLevelData：永远是当前层次的数据 - 数据源来自于组件调用时传递的
// 监听props变化
const currentLevelData: any = computed(() => {return props.list;
});/*** 切换类型*/
function handleChange(type: string, item: any) {if (objectFile.includes(type)) {item.value = '';item.child = [];} else {delete item.child;}
}/*** 添(追)加子集*/
function addSubset(item: any) {const lastDeep = props.deep;if (lastDeep == 5) return message.info('最多支持5层结构', 2);item.value = '';item.value = '';item.child.push({key: `params${props.deep + 1}-${item.child.length + 1}`,type: 'string',value: '',desc: '',});
}/*** 删除*/
function deleteTarget(index: number) {currentLevelData.value.splice(index, 1);
}/*** 获取数据*/
function getChildParams() {return currentLevelData.value;
}
/*** 将子组件方法暴露给父组件*/
defineExpose({addSubset,getChildParams,
});
</script>
<style lang="less" scoped>
.common {width: 135px;
}
.type {width: 100px !important;
}
</style>

3.2 父组件使用

<template><CustomInputGroup ref="paramRef" :list="formState.param" :deep="1" /><a-button class="mt10" type="primary" @click="addLineParam('param')"> 添加行 </a-button>
</template><script>
const formState = ({param:[]
})/*** 添加行(headersParam、requestParam)*/
function addLineParam(formStateKey: string) {formState[formStateKey].push({key: `params${formState[formStateKey].length + 1}`,type: 'string',value: '',desc: '',});
}
</script>