什么！你还不会写Vue组件，编写《数据级权限》匹配公式组件
说明该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。
该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。
说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。
友情提醒：本篇文章是属于系列文章，看该文章前，建议先看之前文章，可以更好理解项目结构。
qq群：801913255，进群有什么不懂的尽管问，群主都会耐心解答。
有兴趣的朋友，请关注我吧(*^▽^*)。
关注我，学不会你来打我
前言
该篇文章是实现【数据级权限】的开篇文章，其主要实现内容如下图↓
该图为功能级权限匹配插件
创建模型和数据源
在实现组件前，先要使用TS把模型和数据源创建好
我的文档目录如：Src->model->match->index.ts 依托于开源项目OverallAuth2.0统一权限分发中心的系统架构
创建匹配条件的关系
//组条件
export const matchingGroup = [
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>{
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>label: '且',
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>value: 'And',
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>disabled: false
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>},
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>{
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>label: '或',
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>value: 'Or',
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>disabled: false
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}
]View Code创建匹配组件模型
//公式匹配模型
export interface matchingData {
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>id: string;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>// 父级id
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>pid: string;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//匹配组（and,or）
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>matchGroup: string;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//层级
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>level: number;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//匹配条件
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>matchingWhere: matchingWhereData[];
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//子集
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>children: matchingData[];
}
//匹配条件模型
export interface matchingWhereData {
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//主键
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>id: string;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//字段key（选中的字段）
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>fieldKey: string;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//等式符号key（选中的符号）
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>matchEquationKey: string;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//匹配数据key（选中的匹配值）
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>matchDataKey: string;
}View Code创建生成随机id的方法
/* 生成随机不重复id */
export const randamId = function () {
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>let n = 1;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>let arr = [];
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>for (let i = 0; i < n; i++) {
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>arr = parseInt((Math.random() * 10000000000).toString());
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>for (let i = 0; i < n; i++) {
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>for (let j = i + 1; j < n; j++) {
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (arr === arr) {
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>randamId();
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return false;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return ("Item-" + arr).toString();
};View Code编写组件
我的页面目录：Src->views->match->index.vue Src->views->match->match.vue
编写match.vue页面代码
<template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><el-select
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>v-model="item.matchGroup"
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>placeholder="请选择"
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>style="
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>float: left;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>margin-right: 10px;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>margin-left: 10px;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>min-width: 100px;
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>"
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><el-option
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>v-for="group in matchingGroup"
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>:key="group.value"
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>:label="group.label"
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>:value="group.value"
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>/>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template></el-select>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>这里放操作按钮
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>
</template>View Code编写index.vue页面代码
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>View Codeindex.vue页面中，我们添加了一条分组的默认值。查看下效果
添加分组按钮
在class='buttonStyle' div中添加如下代码
新增分组<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>新增条件<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>删除分组
添加按钮事件
添加前，我们必须先安装一个插件：npm install number-precision
在setup(props)中添加如下代码，并retrun事件
//最多组<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const maxGroup = ref(5);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//最多层级<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const maxLevel = ref(3);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//最多条件<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const maxWhere = ref(10);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>// 添加组事件<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const addGroup = function (item: matchingData) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//获取当前组的长度<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>var listGroupLength = item.children.length;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//添加前验证最多添加多少层级<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (item.level >= maxLevel.value) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>ElMessage({<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>message: "最多添加" + maxLevel.value + "级",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>type: "warning",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//添加前验证能添加多少组<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (listGroupLength >= maxGroup.value) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>ElMessage({<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>message: "每层下最多添加" + maxGroup.value + "个组",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>type: "warning",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//当前组必须要有条件才能添加下级组<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (item.matchingWhere.length == 0) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>ElMessage({<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>message: "当前组下无任何条件,不能添加分组！",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>type: "warning",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//组织要添加节点的数据<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>var groupId = item.id + "-" + (listGroupLength + 1);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>var groupPid = item.id;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>var groupLevel = item.level + 1;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//找到对应的下标<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const index = props.data.findIndex((s) => {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (s.id === item.id) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return true;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//精确插入当前节点及插入位置<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>var indexLength = listGroupLength + 1;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>item.children.splice(plus(...), 0, {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>id: groupId,<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>pid: groupPid,<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>matchGroup: "Or",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>level: groupLevel,<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>matchingWhere: [],<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>children: [],<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>};<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>// 删除组<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const deleteGroup = function (item: matchingData) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>GetGroupSpliceIndex(item.id, props.data);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>};<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//递归删除组<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const GetGroupSpliceIndex = (id: string, list: matchingData[]) => {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//找到删除数据下标<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const index = list.findIndex((p: { id: string }) => {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (p.id === id) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return true;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (index === -1) GetGroupSpliceIndex(id, list.children);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>list.forEach((f: { id: string }) => {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (f.id == id) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>list.splice(index, 1);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>};View Code这个时候，我们点击按钮，不会出现下级。因为递归的重要一步，并没有完成。
在match.vue 页面中找到有 的div，在div中的末尾添加如下代码
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/>以上代码是实现递归的关键，位置一定要准。
说明一点xc-match一定要和页面导出的名称一样。
看效果图
添加条件及条件按钮
添加条件项
在match.vue页面xc-match元素前，添加如下代码
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template> <xc-match
v-if="item.children && item.children.length"
:data="item.children"
/>删除条件<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>View Codecss如下
/* 项背景色 */
.itemBackColor {
height: 46px;
display: -webkit-box;
margin-left: 20px;
margin-right: 20px;
display: flex;
align-items: center;
}
.itemBackColor > *:not(:first-child) {
margin-left: 10px;
}添加条件按钮事件
//添加项事件<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const addItem = function (item: matchingData) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (item.matchingWhere.length > maxWhere.value) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>ElMessage({<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>message: "每层下最多添加" + maxWhere.value + "组条件",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>type: "warning",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>item.matchingWhere.push({<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>id: randamId().toString(),<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>fieldKey: "",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>matchEquationKey: "",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>matchDataKey: "",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>};<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>// 删除项<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const deleteItem = function (item: matchingWhereData, data: matchingData) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>GetItemSpliceIndex(item.id, data);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>};<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//递归删除项<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const GetItemSpliceIndex = (id: string, list: any) => {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//找到删除数据下标<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const index = list.matchingWhere.findIndex((p: { id: string }) => {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (p.id === id) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return true;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (index === -1) GetItemSpliceIndex(id, list.children);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>list.matchingWhere.forEach((f: { id: string }) => {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (f.id == id) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//删除当前项<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>list.matchingWhere.splice(index, 1);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (list.matchingWhere.length == 0) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>var parentGroup = props.data.filter((s) => s.id == list.pid);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//当前组下无任何项并且层级不等于1，删除当前组<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (parentGroup.length == 0 && list.level !== 1) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>GetGroupSpliceIndex(list.id, props.data);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>};View Code查看效果，如下图↓
验证条件是否完整
编写验证方法
//验证条件是否为空<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const VerifyWhereEmpty = function () {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const isTrueArray = ref([]);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>VerifyFunction(props.data, isTrueArray.value);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const trueArray = isTrueArray.value?.filter((f) => f === true);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (trueArray.length === 0) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>ElMessage({<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>message: "成功",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>type: "warning",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>} else {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>ElMessage({<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>message: "匹配条件未填写完整",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>type: "warning",<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>};<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>//递归验证<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>const VerifyFunction = function (<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>list: matchingData[],<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>isTrueArray: boolean[]<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>list.forEach((element) => {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>element.matchingWhere.forEach((w) => {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>w.matchEquationKey.length == 0 ||<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>w.matchDataKey.length == 0 ||<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>w.fieldKey.length == 0<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>isTrueArray.push(true);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>return;<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>if (element.children.length > 0) {<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>VerifyFunction(element.children, isTrueArray);<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>}<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>});<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>};View Code在index.vue 页面调用
<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>保存<template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template><template>
<xc-match
v-if="item.children && item.children.length"
:data="item.children"
/> <match :data="pageList"></match>
</template>View Code做完这些就能达到最终效果
需要源码的，关注公众号，发送【权限】获取源码
以上就是本篇文章的全部内容，感谢耐心观看
后端WebApi 预览地址：http://139.155.137.144:8880/swagger/index.html
前端vue 预览地址：http://139.155.137.144:8881
关注公众号：发送【权限】，获取源码
有兴趣的朋友，请关注我微信公众号吧(*^▽^*)。
关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]