登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›什么！你还不会写Vue组件，编写《数据级权限》匹配公式 ...

什么！你还不会写Vue组件，编写《数据级权限》匹配公式组件

仁夹篇 4 天前
说明

    该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。
    该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。
    说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。
友情提醒：本篇文章是属于系列文章，看该文章前，建议先看之前文章，可以更好理解项目结构。
qq群：801913255，进群有什么不懂的尽管问，群主都会耐心解答。
有兴趣的朋友，请关注我吧(*^▽^*)。
1.bmp

关注我，学不会你来打我
前言
该篇文章是实现【数据级权限】的开篇文章，其主要实现内容如下图↓
该图为功能级权限匹配插件
2.gif

创建模型和数据源
在实现组件前，先要使用TS把模型和数据源创建好
我的文档目录如：Src->model->match->index.ts    依托于开源项目OverallAuth2.0统一权限分发中心的系统架构
创建匹配条件的关系
3.gif
4.gif
  1. //组条件
  2. export const matchingGroup = [
  3. <template>
  4.    <xc-match
  5.           v-if="item.children && item.children.length"
  6.           :data="item.children"
  7.         /> <match :data="pageList"></match>
  8. </template>{
  9. <template>
  10.    <xc-match
  11.           v-if="item.children && item.children.length"
  12.           :data="item.children"
  13.         /> <match :data="pageList"></match>
  14. </template><template>
  15.    <xc-match
  16.           v-if="item.children && item.children.length"
  17.           :data="item.children"
  18.         /> <match :data="pageList"></match>
  19. </template>label: '且',
  20. <template>
  21.    <xc-match
  22.           v-if="item.children && item.children.length"
  23.           :data="item.children"
  24.         /> <match :data="pageList"></match>
  25. </template><template>
  26.    <xc-match
  27.           v-if="item.children && item.children.length"
  28.           :data="item.children"
  29.         /> <match :data="pageList"></match>
  30. </template>value: 'And',
  31. <template>
  32.    <xc-match
  33.           v-if="item.children && item.children.length"
  34.           :data="item.children"
  35.         /> <match :data="pageList"></match>
  36. </template><template>
  37.    <xc-match
  38.           v-if="item.children && item.children.length"
  39.           :data="item.children"
  40.         /> <match :data="pageList"></match>
  41. </template>disabled: false
  42. <template>
  43.    <xc-match
  44.           v-if="item.children && item.children.length"
  45.           :data="item.children"
  46.         /> <match :data="pageList"></match>
  47. </template>},
  48. <template>
  49.    <xc-match
  50.           v-if="item.children && item.children.length"
  51.           :data="item.children"
  52.         /> <match :data="pageList"></match>
  53. </template>{
  54. <template>
  55.    <xc-match
  56.           v-if="item.children && item.children.length"
  57.           :data="item.children"
  58.         /> <match :data="pageList"></match>
  59. </template><template>
  60.    <xc-match
  61.           v-if="item.children && item.children.length"
  62.           :data="item.children"
  63.         /> <match :data="pageList"></match>
  64. </template>label: '或',
  65. <template>
  66.    <xc-match
  67.           v-if="item.children && item.children.length"
  68.           :data="item.children"
  69.         /> <match :data="pageList"></match>
  70. </template><template>
  71.    <xc-match
  72.           v-if="item.children && item.children.length"
  73.           :data="item.children"
  74.         /> <match :data="pageList"></match>
  75. </template>value: 'Or',
  76. <template>
  77.    <xc-match
  78.           v-if="item.children && item.children.length"
  79.           :data="item.children"
  80.         /> <match :data="pageList"></match>
  81. </template><template>
  82.    <xc-match
  83.           v-if="item.children && item.children.length"
  84.           :data="item.children"
  85.         /> <match :data="pageList"></match>
  86. </template>disabled: false
  87. <template>
  88.    <xc-match
  89.           v-if="item.children && item.children.length"
  90.           :data="item.children"
  91.         /> <match :data="pageList"></match>
  92. </template>}
  93. ]
复制代码
View Code创建匹配组件模型
5.gif
6.gif
  1. //公式匹配模型
  2. export interface matchingData {
  4. <template>
  5.    <xc-match
  6.           v-if="item.children && item.children.length"
  7.           :data="item.children"
  8.         /> <match :data="pageList"></match>
  9. </template>id: string;
  10. <template>
  11.    <xc-match
  12.           v-if="item.children && item.children.length"
  13.           :data="item.children"
  14.         /> <match :data="pageList"></match>
  15. </template>// 父级id
  16. <template>
  17.    <xc-match
  18.           v-if="item.children && item.children.length"
  19.           :data="item.children"
  20.         /> <match :data="pageList"></match>
  21. </template>pid: string;
  22. <template>
  23.    <xc-match
  24.           v-if="item.children && item.children.length"
  25.           :data="item.children"
  26.         /> <match :data="pageList"></match>
  27. </template>//匹配组（and,or）
  28. <template>
  29.    <xc-match
  30.           v-if="item.children && item.children.length"
  31.           :data="item.children"
  32.         /> <match :data="pageList"></match>
  33. </template>matchGroup: string;
  34. <template>
  35.    <xc-match
  36.           v-if="item.children && item.children.length"
  37.           :data="item.children"
  38.         /> <match :data="pageList"></match>
  39. </template>//层级
  40. <template>
  41.    <xc-match
  42.           v-if="item.children && item.children.length"
  43.           :data="item.children"
  44.         /> <match :data="pageList"></match>
  45. </template>level: number;
  46. <template>
  47.    <xc-match
  48.           v-if="item.children && item.children.length"
  49.           :data="item.children"
  50.         /> <match :data="pageList"></match>
  51. </template>//匹配条件
  52. <template>
  53.    <xc-match
  54.           v-if="item.children && item.children.length"
  55.           :data="item.children"
  56.         /> <match :data="pageList"></match>
  57. </template>matchingWhere: matchingWhereData[];
  58. <template>
  59.    <xc-match
  60.           v-if="item.children && item.children.length"
  61.           :data="item.children"
  62.         /> <match :data="pageList"></match>
  63. </template>//子集
  64. <template>
  65.    <xc-match
  66.           v-if="item.children && item.children.length"
  67.           :data="item.children"
  68.         /> <match :data="pageList"></match>
  69. </template>children: matchingData[];
  70. }
  72. //匹配条件模型
  73. export interface matchingWhereData {
  74. <template>
  75.    <xc-match
  76.           v-if="item.children && item.children.length"
  77.           :data="item.children"
  78.         /> <match :data="pageList"></match>
  79. </template>//主键
  80. <template>
  81.    <xc-match
  82.           v-if="item.children && item.children.length"
  83.           :data="item.children"
  84.         /> <match :data="pageList"></match>
  85. </template>id: string;
  86. <template>
  87.    <xc-match
  88.           v-if="item.children && item.children.length"
  89.           :data="item.children"
  90.         /> <match :data="pageList"></match>
  91. </template>//字段key（选中的字段）
  92. <template>
  93.    <xc-match
  94.           v-if="item.children && item.children.length"
  95.           :data="item.children"
  96.         /> <match :data="pageList"></match>
  97. </template>fieldKey: string;
  98. <template>
  99.    <xc-match
  100.           v-if="item.children && item.children.length"
  101.           :data="item.children"
  102.         /> <match :data="pageList"></match>
  103. </template>//等式符号key（选中的符号）
  104. <template>
  105.    <xc-match
  106.           v-if="item.children && item.children.length"
  107.           :data="item.children"
  108.         /> <match :data="pageList"></match>
  109. </template>matchEquationKey: string;
  110. <template>
  111.    <xc-match
  112.           v-if="item.children && item.children.length"
  113.           :data="item.children"
  114.         /> <match :data="pageList"></match>
  115. </template>//匹配数据key（选中的匹配值）
  116. <template>
  117.    <xc-match
  118.           v-if="item.children && item.children.length"
  119.           :data="item.children"
  120.         /> <match :data="pageList"></match>
  121. </template>matchDataKey: string;
  122. }
复制代码
View Code创建生成随机id的方法
7.gif
8.gif
  1. /* 生成随机不重复id */
  2. export const randamId = function () {
  3. <template>
  4.    <xc-match
  5.           v-if="item.children && item.children.length"
  6.           :data="item.children"
  7.         /> <match :data="pageList"></match>
  8. </template>let n = 1;
  9. <template>
  10.    <xc-match
  11.           v-if="item.children && item.children.length"
  12.           :data="item.children"
  13.         /> <match :data="pageList"></match>
  14. </template>let arr = [];
  15. <template>
  16.    <xc-match
  17.           v-if="item.children && item.children.length"
  18.           :data="item.children"
  19.         /> <match :data="pageList"></match>
  20. </template>for (let i = 0; i < n; i++) {
  21. <template>
  22.    <xc-match
  23.           v-if="item.children && item.children.length"
  24.           :data="item.children"
  25.         /> <match :data="pageList"></match>
  26. </template><template>
  27.    <xc-match
  28.           v-if="item.children && item.children.length"
  29.           :data="item.children"
  30.         /> <match :data="pageList"></match>
  31. </template>arr[i] = parseInt((Math.random() * 10000000000).toString());
  32. <template>
  33.    <xc-match
  34.           v-if="item.children && item.children.length"
  35.           :data="item.children"
  36.         /> <match :data="pageList"></match>
  37. </template>}
  38. <template>
  39.    <xc-match
  40.           v-if="item.children && item.children.length"
  41.           :data="item.children"
  42.         /> <match :data="pageList"></match>
  43. </template>for (let i = 0; i < n; i++) {
  44. <template>
  45.    <xc-match
  46.           v-if="item.children && item.children.length"
  47.           :data="item.children"
  48.         /> <match :data="pageList"></match>
  49. </template><template>
  50.    <xc-match
  51.           v-if="item.children && item.children.length"
  52.           :data="item.children"
  53.         /> <match :data="pageList"></match>
  54. </template>for (let j = i + 1; j < n; j++) {
  55. <template>
  56.    <xc-match
  57.           v-if="item.children && item.children.length"
  58.           :data="item.children"
  59.         /> <match :data="pageList"></match>
  60. </template><template>
  61.    <xc-match
  62.           v-if="item.children && item.children.length"
  63.           :data="item.children"
  64.         /> <match :data="pageList"></match>
  65. </template><template>
  66.    <xc-match
  67.           v-if="item.children && item.children.length"
  68.           :data="item.children"
  69.         /> <match :data="pageList"></match>
  70. </template>if (arr[i] === arr[j]) {
  71. <template>
  72.    <xc-match
  73.           v-if="item.children && item.children.length"
  74.           :data="item.children"
  75.         /> <match :data="pageList"></match>
  76. </template><template>
  77.    <xc-match
  78.           v-if="item.children && item.children.length"
  79.           :data="item.children"
  80.         /> <match :data="pageList"></match>
  81. </template><template>
  82.    <xc-match
  83.           v-if="item.children && item.children.length"
  84.           :data="item.children"
  85.         /> <match :data="pageList"></match>
  86. </template><template>
  87.    <xc-match
  88.           v-if="item.children && item.children.length"
  89.           :data="item.children"
  90.         /> <match :data="pageList"></match>
  91. </template>randamId();
  92. <template>
  93.    <xc-match
  94.           v-if="item.children && item.children.length"
  95.           :data="item.children"
  96.         /> <match :data="pageList"></match>
  97. </template><template>
  98.    <xc-match
  99.           v-if="item.children && item.children.length"
  100.           :data="item.children"
  101.         /> <match :data="pageList"></match>
  102. </template><template>
  103.    <xc-match
  104.           v-if="item.children && item.children.length"
  105.           :data="item.children"
  106.         /> <match :data="pageList"></match>
  107. </template><template>
  108.    <xc-match
  109.           v-if="item.children && item.children.length"
  110.           :data="item.children"
  111.         /> <match :data="pageList"></match>
  112. </template>return false;
  113. <template>
  114.    <xc-match
  115.           v-if="item.children && item.children.length"
  116.           :data="item.children"
  117.         /> <match :data="pageList"></match>
  118. </template><template>
  119.    <xc-match
  120.           v-if="item.children && item.children.length"
  121.           :data="item.children"
  122.         /> <match :data="pageList"></match>
  123. </template><template>
  124.    <xc-match
  125.           v-if="item.children && item.children.length"
  126.           :data="item.children"
  127.         /> <match :data="pageList"></match>
  128. </template>}
  129. <template>
  130.    <xc-match
  131.           v-if="item.children && item.children.length"
  132.           :data="item.children"
  133.         /> <match :data="pageList"></match>
  134. </template><template>
  135.    <xc-match
  136.           v-if="item.children && item.children.length"
  137.           :data="item.children"
  138.         /> <match :data="pageList"></match>
  139. </template>}
  140. <template>
  141.    <xc-match
  142.           v-if="item.children && item.children.length"
  143.           :data="item.children"
  144.         /> <match :data="pageList"></match>
  145. </template>}
  146. <template>
  147.    <xc-match
  148.           v-if="item.children && item.children.length"
  149.           :data="item.children"
  150.         /> <match :data="pageList"></match>
  151. </template>return ("Item-" + arr).toString();
  152. };
复制代码
View Code编写组件
我的页面目录：Src->views->match->index.vue      Src->views->match->match.vue
编写match.vue页面代码
9.gif
10.gif
  1. <template>
  2.   
  3. <template>
  4.    <xc-match
  5.           v-if="item.children && item.children.length"
  6.           :data="item.children"
  7.         /> <match :data="pageList"></match>
  8. </template>
  9. <template>
  10.    <xc-match
  11.           v-if="item.children && item.children.length"
  12.           :data="item.children"
  13.         /> <match :data="pageList"></match>
  14. </template>  
  15. <template>
  16.    <xc-match
  17.           v-if="item.children && item.children.length"
  18.           :data="item.children"
  19.         /> <match :data="pageList"></match>
  20. </template><template>
  21.    <xc-match
  22.           v-if="item.children && item.children.length"
  23.           :data="item.children"
  24.         /> <match :data="pageList"></match>
  25. </template>
  26. <template>
  27.    <xc-match
  28.           v-if="item.children && item.children.length"
  29.           :data="item.children"
  30.         /> <match :data="pageList"></match>
  31. </template><template>
  32.    <xc-match
  33.           v-if="item.children && item.children.length"
  34.           :data="item.children"
  35.         /> <match :data="pageList"></match>
  36. </template>  
  37. <template>
  38.    <xc-match
  39.           v-if="item.children && item.children.length"
  40.           :data="item.children"
  41.         /> <match :data="pageList"></match>
  42. </template><template>
  43.    <xc-match
  44.           v-if="item.children && item.children.length"
  45.           :data="item.children"
  46.         /> <match :data="pageList"></match>
  47. </template><template>
  48.    <xc-match
  49.           v-if="item.children && item.children.length"
  50.           :data="item.children"
  51.         /> <match :data="pageList"></match>
  52. </template><el-select
  53. <template>
  54.    <xc-match
  55.           v-if="item.children && item.children.length"
  56.           :data="item.children"
  57.         /> <match :data="pageList"></match>
  58. </template><template>
  59.    <xc-match
  60.           v-if="item.children && item.children.length"
  61.           :data="item.children"
  62.         /> <match :data="pageList"></match>
  63. </template><template>
  64.    <xc-match
  65.           v-if="item.children && item.children.length"
  66.           :data="item.children"
  67.         /> <match :data="pageList"></match>
  68. </template>  v-model="item.matchGroup"
  69. <template>
  70.    <xc-match
  71.           v-if="item.children && item.children.length"
  72.           :data="item.children"
  73.         /> <match :data="pageList"></match>
  74. </template><template>
  75.    <xc-match
  76.           v-if="item.children && item.children.length"
  77.           :data="item.children"
  78.         /> <match :data="pageList"></match>
  79. </template><template>
  80.    <xc-match
  81.           v-if="item.children && item.children.length"
  82.           :data="item.children"
  83.         /> <match :data="pageList"></match>
  84. </template>  placeholder="请选择"
  85. <template>
  86.    <xc-match
  87.           v-if="item.children && item.children.length"
  88.           :data="item.children"
  89.         /> <match :data="pageList"></match>
  90. </template><template>
  91.    <xc-match
  92.           v-if="item.children && item.children.length"
  93.           :data="item.children"
  94.         /> <match :data="pageList"></match>
  95. </template><template>
  96.    <xc-match
  97.           v-if="item.children && item.children.length"
  98.           :data="item.children"
  99.         /> <match :data="pageList"></match>
  100. </template>  style="
  101. <template>
  102.    <xc-match
  103.           v-if="item.children && item.children.length"
  104.           :data="item.children"
  105.         /> <match :data="pageList"></match>
  106. </template><template>
  107.    <xc-match
  108.           v-if="item.children && item.children.length"
  109.           :data="item.children"
  110.         /> <match :data="pageList"></match>
  111. </template><template>
  112.    <xc-match
  113.           v-if="item.children && item.children.length"
  114.           :data="item.children"
  115.         /> <match :data="pageList"></match>
  116. </template><template>
  117.    <xc-match
  118.           v-if="item.children && item.children.length"
  119.           :data="item.children"
  120.         /> <match :data="pageList"></match>
  121. </template>float: left;
  122. <template>
  123.    <xc-match
  124.           v-if="item.children && item.children.length"
  125.           :data="item.children"
  126.         /> <match :data="pageList"></match>
  127. </template><template>
  128.    <xc-match
  129.           v-if="item.children && item.children.length"
  130.           :data="item.children"
  131.         /> <match :data="pageList"></match>
  132. </template><template>
  133.    <xc-match
  134.           v-if="item.children && item.children.length"
  135.           :data="item.children"
  136.         /> <match :data="pageList"></match>
  137. </template><template>
  138.    <xc-match
  139.           v-if="item.children && item.children.length"
  140.           :data="item.children"
  141.         /> <match :data="pageList"></match>
  142. </template>margin-right: 10px;
  143. <template>
  144.    <xc-match
  145.           v-if="item.children && item.children.length"
  146.           :data="item.children"
  147.         /> <match :data="pageList"></match>
  148. </template><template>
  149.    <xc-match
  150.           v-if="item.children && item.children.length"
  151.           :data="item.children"
  152.         /> <match :data="pageList"></match>
  153. </template><template>
  154.    <xc-match
  155.           v-if="item.children && item.children.length"
  156.           :data="item.children"
  157.         /> <match :data="pageList"></match>
  158. </template><template>
  159.    <xc-match
  160.           v-if="item.children && item.children.length"
  161.           :data="item.children"
  162.         /> <match :data="pageList"></match>
  163. </template>margin-left: 10px;
  164. <template>
  165.    <xc-match
  166.           v-if="item.children && item.children.length"
  167.           :data="item.children"
  168.         /> <match :data="pageList"></match>
  169. </template><template>
  170.    <xc-match
  171.           v-if="item.children && item.children.length"
  172.           :data="item.children"
  173.         /> <match :data="pageList"></match>
  174. </template><template>
  175.    <xc-match
  176.           v-if="item.children && item.children.length"
  177.           :data="item.children"
  178.         /> <match :data="pageList"></match>
  179. </template><template>
  180.    <xc-match
  181.           v-if="item.children && item.children.length"
  182.           :data="item.children"
  183.         /> <match :data="pageList"></match>
  184. </template>min-width: 100px;
  185. <template>
  186.    <xc-match
  187.           v-if="item.children && item.children.length"
  188.           :data="item.children"
  189.         /> <match :data="pageList"></match>
  190. </template><template>
  191.    <xc-match
  192.           v-if="item.children && item.children.length"
  193.           :data="item.children"
  194.         /> <match :data="pageList"></match>
  195. </template><template>
  196.    <xc-match
  197.           v-if="item.children && item.children.length"
  198.           :data="item.children"
  199.         /> <match :data="pageList"></match>
  200. </template>  "
  201. <template>
  202.    <xc-match
  203.           v-if="item.children && item.children.length"
  204.           :data="item.children"
  205.         /> <match :data="pageList"></match>
  206. </template><template>
  207.    <xc-match
  208.           v-if="item.children && item.children.length"
  209.           :data="item.children"
  210.         /> <match :data="pageList"></match>
  211. </template><template>
  212.    <xc-match
  213.           v-if="item.children && item.children.length"
  214.           :data="item.children"
  215.         /> <match :data="pageList"></match>
  216. </template>>
  217. <template>
  218.    <xc-match
  219.           v-if="item.children && item.children.length"
  220.           :data="item.children"
  221.         /> <match :data="pageList"></match>
  222. </template><template>
  223.    <xc-match
  224.           v-if="item.children && item.children.length"
  225.           :data="item.children"
  226.         /> <match :data="pageList"></match>
  227. </template><template>
  228.    <xc-match
  229.           v-if="item.children && item.children.length"
  230.           :data="item.children"
  231.         /> <match :data="pageList"></match>
  232. </template>  <el-option
  233. <template>
  234.    <xc-match
  235.           v-if="item.children && item.children.length"
  236.           :data="item.children"
  237.         /> <match :data="pageList"></match>
  238. </template><template>
  239.    <xc-match
  240.           v-if="item.children && item.children.length"
  241.           :data="item.children"
  242.         /> <match :data="pageList"></match>
  243. </template><template>
  244.    <xc-match
  245.           v-if="item.children && item.children.length"
  246.           :data="item.children"
  247.         /> <match :data="pageList"></match>
  248. </template><template>
  249.    <xc-match
  250.           v-if="item.children && item.children.length"
  251.           :data="item.children"
  252.         /> <match :data="pageList"></match>
  253. </template>v-for="group in matchingGroup"
  254. <template>
  255.    <xc-match
  256.           v-if="item.children && item.children.length"
  257.           :data="item.children"
  258.         /> <match :data="pageList"></match>
  259. </template><template>
  260.    <xc-match
  261.           v-if="item.children && item.children.length"
  262.           :data="item.children"
  263.         /> <match :data="pageList"></match>
  264. </template><template>
  265.    <xc-match
  266.           v-if="item.children && item.children.length"
  267.           :data="item.children"
  268.         /> <match :data="pageList"></match>
  269. </template><template>
  270.    <xc-match
  271.           v-if="item.children && item.children.length"
  272.           :data="item.children"
  273.         /> <match :data="pageList"></match>
  274. </template>:key="group.value"
  275. <template>
  276.    <xc-match
  277.           v-if="item.children && item.children.length"
  278.           :data="item.children"
  279.         /> <match :data="pageList"></match>
  280. </template><template>
  281.    <xc-match
  282.           v-if="item.children && item.children.length"
  283.           :data="item.children"
  284.         /> <match :data="pageList"></match>
  285. </template><template>
  286.    <xc-match
  287.           v-if="item.children && item.children.length"
  288.           :data="item.children"
  289.         /> <match :data="pageList"></match>
  290. </template><template>
  291.    <xc-match
  292.           v-if="item.children && item.children.length"
  293.           :data="item.children"
  294.         /> <match :data="pageList"></match>
  295. </template>:label="group.label"
  296. <template>
  297.    <xc-match
  298.           v-if="item.children && item.children.length"
  299.           :data="item.children"
  300.         /> <match :data="pageList"></match>
  301. </template><template>
  302.    <xc-match
  303.           v-if="item.children && item.children.length"
  304.           :data="item.children"
  305.         /> <match :data="pageList"></match>
  306. </template><template>
  307.    <xc-match
  308.           v-if="item.children && item.children.length"
  309.           :data="item.children"
  310.         /> <match :data="pageList"></match>
  311. </template><template>
  312.    <xc-match
  313.           v-if="item.children && item.children.length"
  314.           :data="item.children"
  315.         /> <match :data="pageList"></match>
  316. </template>:value="group.value"
  317. <template>
  318.    <xc-match
  319.           v-if="item.children && item.children.length"
  320.           :data="item.children"
  321.         /> <match :data="pageList"></match>
  322. </template><template>
  323.    <xc-match
  324.           v-if="item.children && item.children.length"
  325.           :data="item.children"
  326.         /> <match :data="pageList"></match>
  327. </template><template>
  328.    <xc-match
  329.           v-if="item.children && item.children.length"
  330.           :data="item.children"
  331.         /> <match :data="pageList"></match>
  332. </template>  />
  333. <template>
  334.    <xc-match
  335.           v-if="item.children && item.children.length"
  336.           :data="item.children"
  337.         /> <match :data="pageList"></match>
  338. </template><template>
  339.    <xc-match
  340.           v-if="item.children && item.children.length"
  341.           :data="item.children"
  342.         /> <match :data="pageList"></match>
  343. </template><template>
  344.    <xc-match
  345.           v-if="item.children && item.children.length"
  346.           :data="item.children"
  347.         /> <match :data="pageList"></match>
  348. </template></el-select>
  349. <template>
  350.    <xc-match
  351.           v-if="item.children && item.children.length"
  352.           :data="item.children"
  353.         /> <match :data="pageList"></match>
  354. </template><template>
  355.    <xc-match
  356.           v-if="item.children && item.children.length"
  357.           :data="item.children"
  358.         /> <match :data="pageList"></match>
  359. </template>  
  360. <template>
  361.    <xc-match
  362.           v-if="item.children && item.children.length"
  363.           :data="item.children"
  364.         /> <match :data="pageList"></match>
  365. </template><template>
  366.    <xc-match
  367.           v-if="item.children && item.children.length"
  368.           :data="item.children"
  369.         /> <match :data="pageList"></match>
  370. </template>  
  371. <template>
  372.    <xc-match
  373.           v-if="item.children && item.children.length"
  374.           :data="item.children"
  375.         /> <match :data="pageList"></match>
  376. </template><template>
  377.    <xc-match
  378.           v-if="item.children && item.children.length"
  379.           :data="item.children"
  380.         /> <match :data="pageList"></match>
  381. </template><template>
  382.    <xc-match
  383.           v-if="item.children && item.children.length"
  384.           :data="item.children"
  385.         /> <match :data="pageList"></match>
  386. </template>这里放操作按钮
  387. <template>
  388.    <xc-match
  389.           v-if="item.children && item.children.length"
  390.           :data="item.children"
  391.         /> <match :data="pageList"></match>
  392. </template><template>
  393.    <xc-match
  394.           v-if="item.children && item.children.length"
  395.           :data="item.children"
  396.         /> <match :data="pageList"></match>
  397. </template>  
  398. <template>
  399.    <xc-match
  400.           v-if="item.children && item.children.length"
  401.           :data="item.children"
  402.         /> <match :data="pageList"></match>
  403. </template><template>
  404.    <xc-match
  405.           v-if="item.children && item.children.length"
  406.           :data="item.children"
  407.         /> <match :data="pageList"></match>
  408. </template>
  409. <template>
  410.    <xc-match
  411.           v-if="item.children && item.children.length"
  412.           :data="item.children"
  413.         /> <match :data="pageList"></match>
  414. </template>  
  415. <template>
  416.    <xc-match
  417.           v-if="item.children && item.children.length"
  418.           :data="item.children"
  419.         /> <match :data="pageList"></match>
  420. </template>
  421.   
  422. </template>
复制代码
View Code编写index.vue页面代码
11.gif
12.gif
  1. <template>
  2.    <xc-match
  3.           v-if="item.children && item.children.length"
  4.           :data="item.children"
  5.         /> <match :data="pageList"></match>
  6. </template>
复制代码
View Codeindex.vue页面中，我们添加了一条分组的默认值。查看下效果
13.gif

添加分组按钮
在class='buttonStyle' div中添加如下代码
 
  1. 新增分组<template>
  2.    <xc-match
  3.           v-if="item.children && item.children.length"
  4.           :data="item.children"
  5.         /> <match :data="pageList"></match>
  6. </template><template>
  7.    <xc-match
  8.           v-if="item.children && item.children.length"
  9.           :data="item.children"
  10.         /> <match :data="pageList"></match>
  11. </template><template>
  12.    <xc-match
  13.           v-if="item.children && item.children.length"
  14.           :data="item.children"
  15.         /> <match :data="pageList"></match>
  16. </template>  新增条件<template>
  17.    <xc-match
  18.           v-if="item.children && item.children.length"
  19.           :data="item.children"
  20.         /> <match :data="pageList"></match>
  21. </template><template>
  22.    <xc-match
  23.           v-if="item.children && item.children.length"
  24.           :data="item.children"
  25.         /> <match :data="pageList"></match>
  26. </template><template>
  27.    <xc-match
  28.           v-if="item.children && item.children.length"
  29.           :data="item.children"
  30.         /> <match :data="pageList"></match>
  31. </template>  删除分组
复制代码
 
14.png

添加按钮事件
添加前，我们必须先安装一个插件：npm install number-precision
在setup(props)中添加如下代码，并retrun事件
15.gif
16.gif
  1. //最多组<template>
  2.    <xc-match
  3.           v-if="item.children && item.children.length"
  4.           :data="item.children"
  5.         /> <match :data="pageList"></match>
  6. </template>const maxGroup = ref(5);<template>
  7.    <xc-match
  8.           v-if="item.children && item.children.length"
  9.           :data="item.children"
  10.         /> <match :data="pageList"></match>
  11. </template>//最多层级<template>
  12.    <xc-match
  13.           v-if="item.children && item.children.length"
  14.           :data="item.children"
  15.         /> <match :data="pageList"></match>
  16. </template>const maxLevel = ref(3);<template>
  17.    <xc-match
  18.           v-if="item.children && item.children.length"
  19.           :data="item.children"
  20.         /> <match :data="pageList"></match>
  21. </template>//最多条件<template>
  22.    <xc-match
  23.           v-if="item.children && item.children.length"
  24.           :data="item.children"
  25.         /> <match :data="pageList"></match>
  26. </template>const maxWhere = ref(10);<template>
  27.    <xc-match
  28.           v-if="item.children && item.children.length"
  29.           :data="item.children"
  30.         /> <match :data="pageList"></match>
  31. </template>// 添加组事件<template>
  32.    <xc-match
  33.           v-if="item.children && item.children.length"
  34.           :data="item.children"
  35.         /> <match :data="pageList"></match>
  36. </template>const addGroup = function (item: matchingData) {<template>
  37.    <xc-match
  38.           v-if="item.children && item.children.length"
  39.           :data="item.children"
  40.         /> <match :data="pageList"></match>
  41. </template>  //获取当前组的长度<template>
  42.    <xc-match
  43.           v-if="item.children && item.children.length"
  44.           :data="item.children"
  45.         /> <match :data="pageList"></match>
  46. </template>  var listGroupLength = item.children.length;<template>
  47.    <xc-match
  48.           v-if="item.children && item.children.length"
  49.           :data="item.children"
  50.         /> <match :data="pageList"></match>
  51. </template>  //添加前验证最多添加多少层级<template>
  52.    <xc-match
  53.           v-if="item.children && item.children.length"
  54.           :data="item.children"
  55.         /> <match :data="pageList"></match>
  56. </template>  if (item.level >= maxLevel.value) {<template>
  57.    <xc-match
  58.           v-if="item.children && item.children.length"
  59.           :data="item.children"
  60.         /> <match :data="pageList"></match>
  61. </template><template>
  62.    <xc-match
  63.           v-if="item.children && item.children.length"
  64.           :data="item.children"
  65.         /> <match :data="pageList"></match>
  66. </template>ElMessage({<template>
  67.    <xc-match
  68.           v-if="item.children && item.children.length"
  69.           :data="item.children"
  70.         /> <match :data="pageList"></match>
  71. </template><template>
  72.    <xc-match
  73.           v-if="item.children && item.children.length"
  74.           :data="item.children"
  75.         /> <match :data="pageList"></match>
  76. </template>  message: "最多添加" + maxLevel.value + "级",<template>
  77.    <xc-match
  78.           v-if="item.children && item.children.length"
  79.           :data="item.children"
  80.         /> <match :data="pageList"></match>
  81. </template><template>
  82.    <xc-match
  83.           v-if="item.children && item.children.length"
  84.           :data="item.children"
  85.         /> <match :data="pageList"></match>
  86. </template>  type: "warning",<template>
  87.    <xc-match
  88.           v-if="item.children && item.children.length"
  89.           :data="item.children"
  90.         /> <match :data="pageList"></match>
  91. </template><template>
  92.    <xc-match
  93.           v-if="item.children && item.children.length"
  94.           :data="item.children"
  95.         /> <match :data="pageList"></match>
  96. </template>});<template>
  97.    <xc-match
  98.           v-if="item.children && item.children.length"
  99.           :data="item.children"
  100.         /> <match :data="pageList"></match>
  101. </template><template>
  102.    <xc-match
  103.           v-if="item.children && item.children.length"
  104.           :data="item.children"
  105.         /> <match :data="pageList"></match>
  106. </template>return;<template>
  107.    <xc-match
  108.           v-if="item.children && item.children.length"
  109.           :data="item.children"
  110.         /> <match :data="pageList"></match>
  111. </template>  }<template>
  112.    <xc-match
  113.           v-if="item.children && item.children.length"
  114.           :data="item.children"
  115.         /> <match :data="pageList"></match>
  116. </template>  //添加前验证能添加多少组<template>
  117.    <xc-match
  118.           v-if="item.children && item.children.length"
  119.           :data="item.children"
  120.         /> <match :data="pageList"></match>
  121. </template>  if (listGroupLength >= maxGroup.value) {<template>
  122.    <xc-match
  123.           v-if="item.children && item.children.length"
  124.           :data="item.children"
  125.         /> <match :data="pageList"></match>
  126. </template><template>
  127.    <xc-match
  128.           v-if="item.children && item.children.length"
  129.           :data="item.children"
  130.         /> <match :data="pageList"></match>
  131. </template>ElMessage({<template>
  132.    <xc-match
  133.           v-if="item.children && item.children.length"
  134.           :data="item.children"
  135.         /> <match :data="pageList"></match>
  136. </template><template>
  137.    <xc-match
  138.           v-if="item.children && item.children.length"
  139.           :data="item.children"
  140.         /> <match :data="pageList"></match>
  141. </template>  message: "每层下最多添加" + maxGroup.value + "个组",<template>
  142.    <xc-match
  143.           v-if="item.children && item.children.length"
  144.           :data="item.children"
  145.         /> <match :data="pageList"></match>
  146. </template><template>
  147.    <xc-match
  148.           v-if="item.children && item.children.length"
  149.           :data="item.children"
  150.         /> <match :data="pageList"></match>
  151. </template>  type: "warning",<template>
  152.    <xc-match
  153.           v-if="item.children && item.children.length"
  154.           :data="item.children"
  155.         /> <match :data="pageList"></match>
  156. </template><template>
  157.    <xc-match
  158.           v-if="item.children && item.children.length"
  159.           :data="item.children"
  160.         /> <match :data="pageList"></match>
  161. </template>});<template>
  162.    <xc-match
  163.           v-if="item.children && item.children.length"
  164.           :data="item.children"
  165.         /> <match :data="pageList"></match>
  166. </template><template>
  167.    <xc-match
  168.           v-if="item.children && item.children.length"
  169.           :data="item.children"
  170.         /> <match :data="pageList"></match>
  171. </template>return;<template>
  172.    <xc-match
  173.           v-if="item.children && item.children.length"
  174.           :data="item.children"
  175.         /> <match :data="pageList"></match>
  176. </template>  }<template>
  177.    <xc-match
  178.           v-if="item.children && item.children.length"
  179.           :data="item.children"
  180.         /> <match :data="pageList"></match>
  181. </template>  //当前组必须要有条件才能添加下级组<template>
  182.    <xc-match
  183.           v-if="item.children && item.children.length"
  184.           :data="item.children"
  185.         /> <match :data="pageList"></match>
  186. </template>  if (item.matchingWhere.length == 0) {<template>
  187.    <xc-match
  188.           v-if="item.children && item.children.length"
  189.           :data="item.children"
  190.         /> <match :data="pageList"></match>
  191. </template><template>
  192.    <xc-match
  193.           v-if="item.children && item.children.length"
  194.           :data="item.children"
  195.         /> <match :data="pageList"></match>
  196. </template>ElMessage({<template>
  197.    <xc-match
  198.           v-if="item.children && item.children.length"
  199.           :data="item.children"
  200.         /> <match :data="pageList"></match>
  201. </template><template>
  202.    <xc-match
  203.           v-if="item.children && item.children.length"
  204.           :data="item.children"
  205.         /> <match :data="pageList"></match>
  206. </template>  message: "当前组下无任何条件,不能添加分组！",<template>
  207.    <xc-match
  208.           v-if="item.children && item.children.length"
  209.           :data="item.children"
  210.         /> <match :data="pageList"></match>
  211. </template><template>
  212.    <xc-match
  213.           v-if="item.children && item.children.length"
  214.           :data="item.children"
  215.         /> <match :data="pageList"></match>
  216. </template>  type: "warning",<template>
  217.    <xc-match
  218.           v-if="item.children && item.children.length"
  219.           :data="item.children"
  220.         /> <match :data="pageList"></match>
  221. </template><template>
  222.    <xc-match
  223.           v-if="item.children && item.children.length"
  224.           :data="item.children"
  225.         /> <match :data="pageList"></match>
  226. </template>});<template>
  227.    <xc-match
  228.           v-if="item.children && item.children.length"
  229.           :data="item.children"
  230.         /> <match :data="pageList"></match>
  231. </template><template>
  232.    <xc-match
  233.           v-if="item.children && item.children.length"
  234.           :data="item.children"
  235.         /> <match :data="pageList"></match>
  236. </template>return;<template>
  237.    <xc-match
  238.           v-if="item.children && item.children.length"
  239.           :data="item.children"
  240.         /> <match :data="pageList"></match>
  241. </template>  }<template>
  242.    <xc-match
  243.           v-if="item.children && item.children.length"
  244.           :data="item.children"
  245.         /> <match :data="pageList"></match>
  246. </template>  //组织要添加节点的数据<template>
  247.    <xc-match
  248.           v-if="item.children && item.children.length"
  249.           :data="item.children"
  250.         /> <match :data="pageList"></match>
  251. </template>  var groupId = item.id + "-" + (listGroupLength + 1);<template>
  252.    <xc-match
  253.           v-if="item.children && item.children.length"
  254.           :data="item.children"
  255.         /> <match :data="pageList"></match>
  256. </template>  var groupPid = item.id;<template>
  257.    <xc-match
  258.           v-if="item.children && item.children.length"
  259.           :data="item.children"
  260.         /> <match :data="pageList"></match>
  261. </template>  var groupLevel = item.level + 1;<template>
  262.    <xc-match
  263.           v-if="item.children && item.children.length"
  264.           :data="item.children"
  265.         /> <match :data="pageList"></match>
  266. </template>  //找到对应的下标<template>
  267.    <xc-match
  268.           v-if="item.children && item.children.length"
  269.           :data="item.children"
  270.         /> <match :data="pageList"></match>
  271. </template>  const index = props.data.findIndex((s) => {<template>
  272.    <xc-match
  273.           v-if="item.children && item.children.length"
  274.           :data="item.children"
  275.         /> <match :data="pageList"></match>
  276. </template><template>
  277.    <xc-match
  278.           v-if="item.children && item.children.length"
  279.           :data="item.children"
  280.         /> <match :data="pageList"></match>
  281. </template>if (s.id === item.id) {<template>
  282.    <xc-match
  283.           v-if="item.children && item.children.length"
  284.           :data="item.children"
  285.         /> <match :data="pageList"></match>
  286. </template><template>
  287.    <xc-match
  288.           v-if="item.children && item.children.length"
  289.           :data="item.children"
  290.         /> <match :data="pageList"></match>
  291. </template>  return true;<template>
  292.    <xc-match
  293.           v-if="item.children && item.children.length"
  294.           :data="item.children"
  295.         /> <match :data="pageList"></match>
  296. </template><template>
  297.    <xc-match
  298.           v-if="item.children && item.children.length"
  299.           :data="item.children"
  300.         /> <match :data="pageList"></match>
  301. </template>}<template>
  302.    <xc-match
  303.           v-if="item.children && item.children.length"
  304.           :data="item.children"
  305.         /> <match :data="pageList"></match>
  306. </template>  });<template>
  307.    <xc-match
  308.           v-if="item.children && item.children.length"
  309.           :data="item.children"
  310.         /> <match :data="pageList"></match>
  311. </template>  //精确插入当前节点及插入位置<template>
  312.    <xc-match
  313.           v-if="item.children && item.children.length"
  314.           :data="item.children"
  315.         /> <match :data="pageList"></match>
  316. </template>  var indexLength = listGroupLength + 1;<template>
  317.    <xc-match
  318.           v-if="item.children && item.children.length"
  319.           :data="item.children"
  320.         /> <match :data="pageList"></match>
  321. </template>  item.children.splice(plus(...[index, indexLength]), 0, {<template>
  322.    <xc-match
  323.           v-if="item.children && item.children.length"
  324.           :data="item.children"
  325.         /> <match :data="pageList"></match>
  326. </template><template>
  327.    <xc-match
  328.           v-if="item.children && item.children.length"
  329.           :data="item.children"
  330.         /> <match :data="pageList"></match>
  331. </template>id: groupId,<template>
  332.    <xc-match
  333.           v-if="item.children && item.children.length"
  334.           :data="item.children"
  335.         /> <match :data="pageList"></match>
  336. </template><template>
  337.    <xc-match
  338.           v-if="item.children && item.children.length"
  339.           :data="item.children"
  340.         /> <match :data="pageList"></match>
  341. </template>pid: groupPid,<template>
  342.    <xc-match
  343.           v-if="item.children && item.children.length"
  344.           :data="item.children"
  345.         /> <match :data="pageList"></match>
  346. </template><template>
  347.    <xc-match
  348.           v-if="item.children && item.children.length"
  349.           :data="item.children"
  350.         /> <match :data="pageList"></match>
  351. </template>matchGroup: "Or",<template>
  352.    <xc-match
  353.           v-if="item.children && item.children.length"
  354.           :data="item.children"
  355.         /> <match :data="pageList"></match>
  356. </template><template>
  357.    <xc-match
  358.           v-if="item.children && item.children.length"
  359.           :data="item.children"
  360.         /> <match :data="pageList"></match>
  361. </template>level: groupLevel,<template>
  362.    <xc-match
  363.           v-if="item.children && item.children.length"
  364.           :data="item.children"
  365.         /> <match :data="pageList"></match>
  366. </template><template>
  367.    <xc-match
  368.           v-if="item.children && item.children.length"
  369.           :data="item.children"
  370.         /> <match :data="pageList"></match>
  371. </template>matchingWhere: [],<template>
  372.    <xc-match
  373.           v-if="item.children && item.children.length"
  374.           :data="item.children"
  375.         /> <match :data="pageList"></match>
  376. </template><template>
  377.    <xc-match
  378.           v-if="item.children && item.children.length"
  379.           :data="item.children"
  380.         /> <match :data="pageList"></match>
  381. </template>children: [],<template>
  382.    <xc-match
  383.           v-if="item.children && item.children.length"
  384.           :data="item.children"
  385.         /> <match :data="pageList"></match>
  386. </template>  });<template>
  387.    <xc-match
  388.           v-if="item.children && item.children.length"
  389.           :data="item.children"
  390.         /> <match :data="pageList"></match>
  391. </template>};<template>
  392.    <xc-match
  393.           v-if="item.children && item.children.length"
  394.           :data="item.children"
  395.         /> <match :data="pageList"></match>
  396. </template><template>
  397.    <xc-match
  398.           v-if="item.children && item.children.length"
  399.           :data="item.children"
  400.         /> <match :data="pageList"></match>
  401. </template>// 删除组<template>
  402.    <xc-match
  403.           v-if="item.children && item.children.length"
  404.           :data="item.children"
  405.         /> <match :data="pageList"></match>
  406. </template>const deleteGroup = function (item: matchingData) {<template>
  407.    <xc-match
  408.           v-if="item.children && item.children.length"
  409.           :data="item.children"
  410.         /> <match :data="pageList"></match>
  411. </template>  GetGroupSpliceIndex(item.id, props.data);<template>
  412.    <xc-match
  413.           v-if="item.children && item.children.length"
  414.           :data="item.children"
  415.         /> <match :data="pageList"></match>
  416. </template>};<template>
  417.    <xc-match
  418.           v-if="item.children && item.children.length"
  419.           :data="item.children"
  420.         /> <match :data="pageList"></match>
  421. </template>//递归删除组<template>
  422.    <xc-match
  423.           v-if="item.children && item.children.length"
  424.           :data="item.children"
  425.         /> <match :data="pageList"></match>
  426. </template>const GetGroupSpliceIndex = (id: string, list: matchingData[]) => {<template>
  427.    <xc-match
  428.           v-if="item.children && item.children.length"
  429.           :data="item.children"
  430.         /> <match :data="pageList"></match>
  431. </template>  //找到删除数据下标<template>
  432.    <xc-match
  433.           v-if="item.children && item.children.length"
  434.           :data="item.children"
  435.         /> <match :data="pageList"></match>
  436. </template>  const index = list.findIndex((p: { id: string }) => {<template>
  437.    <xc-match
  438.           v-if="item.children && item.children.length"
  439.           :data="item.children"
  440.         /> <match :data="pageList"></match>
  441. </template><template>
  442.    <xc-match
  443.           v-if="item.children && item.children.length"
  444.           :data="item.children"
  445.         /> <match :data="pageList"></match>
  446. </template>if (p.id === id) {<template>
  447.    <xc-match
  448.           v-if="item.children && item.children.length"
  449.           :data="item.children"
  450.         /> <match :data="pageList"></match>
  451. </template><template>
  452.    <xc-match
  453.           v-if="item.children && item.children.length"
  454.           :data="item.children"
  455.         /> <match :data="pageList"></match>
  456. </template>  return true;<template>
  457.    <xc-match
  458.           v-if="item.children && item.children.length"
  459.           :data="item.children"
  460.         /> <match :data="pageList"></match>
  461. </template><template>
  462.    <xc-match
  463.           v-if="item.children && item.children.length"
  464.           :data="item.children"
  465.         /> <match :data="pageList"></match>
  466. </template>}<template>
  467.    <xc-match
  468.           v-if="item.children && item.children.length"
  469.           :data="item.children"
  470.         /> <match :data="pageList"></match>
  471. </template>  });<template>
  472.    <xc-match
  473.           v-if="item.children && item.children.length"
  474.           :data="item.children"
  475.         /> <match :data="pageList"></match>
  476. </template>  if (index === -1) GetGroupSpliceIndex(id, list[0].children);<template>
  477.    <xc-match
  478.           v-if="item.children && item.children.length"
  479.           :data="item.children"
  480.         /> <match :data="pageList"></match>
  481. </template>  list.forEach((f: { id: string }) => {<template>
  482.    <xc-match
  483.           v-if="item.children && item.children.length"
  484.           :data="item.children"
  485.         /> <match :data="pageList"></match>
  486. </template><template>
  487.    <xc-match
  488.           v-if="item.children && item.children.length"
  489.           :data="item.children"
  490.         /> <match :data="pageList"></match>
  491. </template>if (f.id == id) {<template>
  492.    <xc-match
  493.           v-if="item.children && item.children.length"
  494.           :data="item.children"
  495.         /> <match :data="pageList"></match>
  496. </template><template>
  497.    <xc-match
  498.           v-if="item.children && item.children.length"
  499.           :data="item.children"
  500.         /> <match :data="pageList"></match>
  501. </template>  list.splice(index, 1);<template>
  502.    <xc-match
  503.           v-if="item.children && item.children.length"
  504.           :data="item.children"
  505.         /> <match :data="pageList"></match>
  506. </template><template>
  507.    <xc-match
  508.           v-if="item.children && item.children.length"
  509.           :data="item.children"
  510.         /> <match :data="pageList"></match>
  511. </template>}<template>
  512.    <xc-match
  513.           v-if="item.children && item.children.length"
  514.           :data="item.children"
  515.         /> <match :data="pageList"></match>
  516. </template>  });<template>
  517.    <xc-match
  518.           v-if="item.children && item.children.length"
  519.           :data="item.children"
  520.         /> <match :data="pageList"></match>
  521. </template>};
复制代码
View Code这个时候，我们点击按钮，不会出现下级。因为递归的重要一步，并没有完成。
在match.vue 页面中找到有 的div，在div中的末尾添加如下代码
  1.    <xc-match
  2.           v-if="item.children && item.children.length"
  3.           :data="item.children"
  4.         />
复制代码
以上代码是实现递归的关键，位置一定要准。
说明一点xc-match一定要和页面导出的名称一样。
看效果图
17.gif

添加条件及条件按钮
添加条件项
在match.vue页面xc-match元素前，添加如下代码
18.gif
19.gif
  1. <template>
  2.    <xc-match
  3.           v-if="item.children && item.children.length"
  4.           :data="item.children"
  5.         /> <match :data="pageList"></match>
  6. </template><template>
  7.    <xc-match
  8.           v-if="item.children && item.children.length"
  9.           :data="item.children"
  10.         /> <match :data="pageList"></match>
  11. </template><template>
  12.    <xc-match
  13.           v-if="item.children && item.children.length"
  14.           :data="item.children"
  15.         /> <match :data="pageList"></match>
  16. </template><template>
  17.    <xc-match
  18.           v-if="item.children && item.children.length"
  19.           :data="item.children"
  20.         /> <match :data="pageList"></match>
  21. </template><template>
  22.    <xc-match
  23.           v-if="item.children && item.children.length"
  24.           :data="item.children"
  25.         /> <match :data="pageList"></match>
  26. </template><template>
  27.    <xc-match
  28.           v-if="item.children && item.children.length"
  29.           :data="item.children"
  30.         /> <match :data="pageList"></match>
  31. </template><template>
  32.    <xc-match
  33.           v-if="item.children && item.children.length"
  34.           :data="item.children"
  35.         /> <match :data="pageList"></match>
  36. </template><template>
  37.    <xc-match
  38.           v-if="item.children && item.children.length"
  39.           :data="item.children"
  40.         /> <match :data="pageList"></match>
  41. </template><template>
  42.    <xc-match
  43.           v-if="item.children && item.children.length"
  44.           :data="item.children"
  45.         /> <match :data="pageList"></match>
  46. </template><template>
  47.    <xc-match
  48.           v-if="item.children && item.children.length"
  49.           :data="item.children"
  50.         /> <match :data="pageList"></match>
  51. </template><template>
  52.    <xc-match
  53.           v-if="item.children && item.children.length"
  54.           :data="item.children"
  55.         /> <match :data="pageList"></match>
  56. </template><template>
  57.    <xc-match
  58.           v-if="item.children && item.children.length"
  59.           :data="item.children"
  60.         /> <match :data="pageList"></match>
  61. </template><template>
  62.    <xc-match
  63.           v-if="item.children && item.children.length"
  64.           :data="item.children"
  65.         /> <match :data="pageList"></match>
  66. </template><template>
  67.    <xc-match
  68.           v-if="item.children && item.children.length"
  69.           :data="item.children"
  70.         /> <match :data="pageList"></match>
  71. </template><template>
  72.    <xc-match
  73.           v-if="item.children && item.children.length"
  74.           :data="item.children"
  75.         /> <match :data="pageList"></match>
  76. </template><template>
  77.    <xc-match
  78.           v-if="item.children && item.children.length"
  79.           :data="item.children"
  80.         /> <match :data="pageList"></match>
  81. </template><template>
  82.    <xc-match
  83.           v-if="item.children && item.children.length"
  84.           :data="item.children"
  85.         /> <match :data="pageList"></match>
  86. </template><template>
  87.    <xc-match
  88.           v-if="item.children && item.children.length"
  89.           :data="item.children"
  90.         /> <match :data="pageList"></match>
  91. </template><template>
  92.    <xc-match
  93.           v-if="item.children && item.children.length"
  94.           :data="item.children"
  95.         /> <match :data="pageList"></match>
  96. </template><template>
  97.    <xc-match
  98.           v-if="item.children && item.children.length"
  99.           :data="item.children"
  100.         /> <match :data="pageList"></match>
  101. </template><template>
  102.    <xc-match
  103.           v-if="item.children && item.children.length"
  104.           :data="item.children"
  105.         /> <match :data="pageList"></match>
  106. </template><template>
  107.    <xc-match
  108.           v-if="item.children && item.children.length"
  109.           :data="item.children"
  110.         /> <match :data="pageList"></match>
  111. </template><template>
  112.    <xc-match
  113.           v-if="item.children && item.children.length"
  114.           :data="item.children"
  115.         /> <match :data="pageList"></match>
  116. </template><template>
  117.    <xc-match
  118.           v-if="item.children && item.children.length"
  119.           :data="item.children"
  120.         /> <match :data="pageList"></match>
  121. </template><template>
  122.    <xc-match
  123.           v-if="item.children && item.children.length"
  124.           :data="item.children"
  125.         /> <match :data="pageList"></match>
  126. </template><template>
  127.    <xc-match
  128.           v-if="item.children && item.children.length"
  129.           :data="item.children"
  130.         /> <match :data="pageList"></match>
  131. </template><template>
  132.    <xc-match
  133.           v-if="item.children && item.children.length"
  134.           :data="item.children"
  135.         /> <match :data="pageList"></match>
  136. </template><template>
  137.    <xc-match
  138.           v-if="item.children && item.children.length"
  139.           :data="item.children"
  140.         /> <match :data="pageList"></match>
  141. </template><template>
  142.    <xc-match
  143.           v-if="item.children && item.children.length"
  144.           :data="item.children"
  145.         /> <match :data="pageList"></match>
  146. </template><template>
  147.    <xc-match
  148.           v-if="item.children && item.children.length"
  149.           :data="item.children"
  150.         /> <match :data="pageList"></match>
  151. </template><template>
  152.    <xc-match
  153.           v-if="item.children && item.children.length"
  154.           :data="item.children"
  155.         /> <match :data="pageList"></match>
  156. </template><template>
  157.    <xc-match
  158.           v-if="item.children && item.children.length"
  159.           :data="item.children"
  160.         /> <match :data="pageList"></match>
  161. </template><template>
  162.    <xc-match
  163.           v-if="item.children && item.children.length"
  164.           :data="item.children"
  165.         /> <match :data="pageList"></match>
  166. </template><template>
  167.    <xc-match
  168.           v-if="item.children && item.children.length"
  169.           :data="item.children"
  170.         /> <match :data="pageList"></match>
  171. </template><template>
  172.    <xc-match
  173.           v-if="item.children && item.children.length"
  174.           :data="item.children"
  175.         /> <match :data="pageList"></match>
  176. </template><template>
  177.    <xc-match
  178.           v-if="item.children && item.children.length"
  179.           :data="item.children"
  180.         /> <match :data="pageList"></match>
  181. </template><template>
  182.    <xc-match
  183.           v-if="item.children && item.children.length"
  184.           :data="item.children"
  185.         /> <match :data="pageList"></match>
  186. </template><template>
  187.    <xc-match
  188.           v-if="item.children && item.children.length"
  189.           :data="item.children"
  190.         /> <match :data="pageList"></match>
  191. </template><template>
  192.    <xc-match
  193.           v-if="item.children && item.children.length"
  194.           :data="item.children"
  195.         /> <match :data="pageList"></match>
  196. </template><template>
  197.    <xc-match
  198.           v-if="item.children && item.children.length"
  199.           :data="item.children"
  200.         /> <match :data="pageList"></match>
  201. </template><template>
  202.    <xc-match
  203.           v-if="item.children && item.children.length"
  204.           :data="item.children"
  205.         /> <match :data="pageList"></match>
  206. </template>   <xc-match
  207.           v-if="item.children && item.children.length"
  208.           :data="item.children"
  209.         />删除条件<template>
  210.    <xc-match
  211.           v-if="item.children && item.children.length"
  212.           :data="item.children"
  213.         /> <match :data="pageList"></match>
  214. </template><template>
  215.    <xc-match
  216.           v-if="item.children && item.children.length"
  217.           :data="item.children"
  218.         /> <match :data="pageList"></match>
  219. </template><template>
  220.    <xc-match
  221.           v-if="item.children && item.children.length"
  222.           :data="item.children"
  223.         /> <match :data="pageList"></match>
  224. </template><template>
  225.    <xc-match
  226.           v-if="item.children && item.children.length"
  227.           :data="item.children"
  228.         /> <match :data="pageList"></match>
  229. </template>  
复制代码
View Codecss如下
  1. /* 项背景色 */
  2. .itemBackColor {
  3.   height: 46px;
  4.   display: -webkit-box;
  5.   margin-left: 20px;
  6.   margin-right: 20px;
  7.   display: flex;
  8.   align-items: center;
  9. }
  10. .itemBackColor > *:not(:first-child) {
  11.   margin-left: 10px;
  12. }
复制代码
添加条件按钮事件
20.gif
21.gif
  1. //添加项事件<template>
  2.    <xc-match
  3.           v-if="item.children && item.children.length"
  4.           :data="item.children"
  5.         /> <match :data="pageList"></match>
  6. </template>const addItem = function (item: matchingData) {<template>
  7.    <xc-match
  8.           v-if="item.children && item.children.length"
  9.           :data="item.children"
  10.         /> <match :data="pageList"></match>
  11. </template>  if (item.matchingWhere.length > maxWhere.value) {<template>
  12.    <xc-match
  13.           v-if="item.children && item.children.length"
  14.           :data="item.children"
  15.         /> <match :data="pageList"></match>
  16. </template><template>
  17.    <xc-match
  18.           v-if="item.children && item.children.length"
  19.           :data="item.children"
  20.         /> <match :data="pageList"></match>
  21. </template>ElMessage({<template>
  22.    <xc-match
  23.           v-if="item.children && item.children.length"
  24.           :data="item.children"
  25.         /> <match :data="pageList"></match>
  26. </template><template>
  27.    <xc-match
  28.           v-if="item.children && item.children.length"
  29.           :data="item.children"
  30.         /> <match :data="pageList"></match>
  31. </template>  message: "每层下最多添加" + maxWhere.value + "组条件",<template>
  32.    <xc-match
  33.           v-if="item.children && item.children.length"
  34.           :data="item.children"
  35.         /> <match :data="pageList"></match>
  36. </template><template>
  37.    <xc-match
  38.           v-if="item.children && item.children.length"
  39.           :data="item.children"
  40.         /> <match :data="pageList"></match>
  41. </template>  type: "warning",<template>
  42.    <xc-match
  43.           v-if="item.children && item.children.length"
  44.           :data="item.children"
  45.         /> <match :data="pageList"></match>
  46. </template><template>
  47.    <xc-match
  48.           v-if="item.children && item.children.length"
  49.           :data="item.children"
  50.         /> <match :data="pageList"></match>
  51. </template>});<template>
  52.    <xc-match
  53.           v-if="item.children && item.children.length"
  54.           :data="item.children"
  55.         /> <match :data="pageList"></match>
  56. </template><template>
  57.    <xc-match
  58.           v-if="item.children && item.children.length"
  59.           :data="item.children"
  60.         /> <match :data="pageList"></match>
  61. </template>return;<template>
  62.    <xc-match
  63.           v-if="item.children && item.children.length"
  64.           :data="item.children"
  65.         /> <match :data="pageList"></match>
  66. </template>  }<template>
  67.    <xc-match
  68.           v-if="item.children && item.children.length"
  69.           :data="item.children"
  70.         /> <match :data="pageList"></match>
  71. </template>  item.matchingWhere.push({<template>
  72.    <xc-match
  73.           v-if="item.children && item.children.length"
  74.           :data="item.children"
  75.         /> <match :data="pageList"></match>
  76. </template><template>
  77.    <xc-match
  78.           v-if="item.children && item.children.length"
  79.           :data="item.children"
  80.         /> <match :data="pageList"></match>
  81. </template>id: randamId().toString(),<template>
  82.    <xc-match
  83.           v-if="item.children && item.children.length"
  84.           :data="item.children"
  85.         /> <match :data="pageList"></match>
  86. </template><template>
  87.    <xc-match
  88.           v-if="item.children && item.children.length"
  89.           :data="item.children"
  90.         /> <match :data="pageList"></match>
  91. </template>fieldKey: "",<template>
  92.    <xc-match
  93.           v-if="item.children && item.children.length"
  94.           :data="item.children"
  95.         /> <match :data="pageList"></match>
  96. </template><template>
  97.    <xc-match
  98.           v-if="item.children && item.children.length"
  99.           :data="item.children"
  100.         /> <match :data="pageList"></match>
  101. </template>matchEquationKey: "",<template>
  102.    <xc-match
  103.           v-if="item.children && item.children.length"
  104.           :data="item.children"
  105.         /> <match :data="pageList"></match>
  106. </template><template>
  107.    <xc-match
  108.           v-if="item.children && item.children.length"
  109.           :data="item.children"
  110.         /> <match :data="pageList"></match>
  111. </template>matchDataKey: "",<template>
  112.    <xc-match
  113.           v-if="item.children && item.children.length"
  114.           :data="item.children"
  115.         /> <match :data="pageList"></match>
  116. </template>  });<template>
  117.    <xc-match
  118.           v-if="item.children && item.children.length"
  119.           :data="item.children"
  120.         /> <match :data="pageList"></match>
  121. </template>};<template>
  122.    <xc-match
  123.           v-if="item.children && item.children.length"
  124.           :data="item.children"
  125.         /> <match :data="pageList"></match>
  126. </template>// 删除项<template>
  127.    <xc-match
  128.           v-if="item.children && item.children.length"
  129.           :data="item.children"
  130.         /> <match :data="pageList"></match>
  131. </template>const deleteItem = function (item: matchingWhereData, data: matchingData) {<template>
  132.    <xc-match
  133.           v-if="item.children && item.children.length"
  134.           :data="item.children"
  135.         /> <match :data="pageList"></match>
  136. </template>  GetItemSpliceIndex(item.id, data);<template>
  137.    <xc-match
  138.           v-if="item.children && item.children.length"
  139.           :data="item.children"
  140.         /> <match :data="pageList"></match>
  141. </template>};<template>
  142.    <xc-match
  143.           v-if="item.children && item.children.length"
  144.           :data="item.children"
  145.         /> <match :data="pageList"></match>
  146. </template>//递归删除项<template>
  147.    <xc-match
  148.           v-if="item.children && item.children.length"
  149.           :data="item.children"
  150.         /> <match :data="pageList"></match>
  151. </template>const GetItemSpliceIndex = (id: string, list: any) => {<template>
  152.    <xc-match
  153.           v-if="item.children && item.children.length"
  154.           :data="item.children"
  155.         /> <match :data="pageList"></match>
  156. </template>  //找到删除数据下标<template>
  157.    <xc-match
  158.           v-if="item.children && item.children.length"
  159.           :data="item.children"
  160.         /> <match :data="pageList"></match>
  161. </template>  const index = list.matchingWhere.findIndex((p: { id: string }) => {<template>
  162.    <xc-match
  163.           v-if="item.children && item.children.length"
  164.           :data="item.children"
  165.         /> <match :data="pageList"></match>
  166. </template><template>
  167.    <xc-match
  168.           v-if="item.children && item.children.length"
  169.           :data="item.children"
  170.         /> <match :data="pageList"></match>
  171. </template>if (p.id === id) {<template>
  172.    <xc-match
  173.           v-if="item.children && item.children.length"
  174.           :data="item.children"
  175.         /> <match :data="pageList"></match>
  176. </template><template>
  177.    <xc-match
  178.           v-if="item.children && item.children.length"
  179.           :data="item.children"
  180.         /> <match :data="pageList"></match>
  181. </template>  return true;<template>
  182.    <xc-match
  183.           v-if="item.children && item.children.length"
  184.           :data="item.children"
  185.         /> <match :data="pageList"></match>
  186. </template><template>
  187.    <xc-match
  188.           v-if="item.children && item.children.length"
  189.           :data="item.children"
  190.         /> <match :data="pageList"></match>
  191. </template>}<template>
  192.    <xc-match
  193.           v-if="item.children && item.children.length"
  194.           :data="item.children"
  195.         /> <match :data="pageList"></match>
  196. </template>  });<template>
  197.    <xc-match
  198.           v-if="item.children && item.children.length"
  199.           :data="item.children"
  200.         /> <match :data="pageList"></match>
  201. </template>  if (index === -1) GetItemSpliceIndex(id, list.children);<template>
  202.    <xc-match
  203.           v-if="item.children && item.children.length"
  204.           :data="item.children"
  205.         /> <match :data="pageList"></match>
  206. </template>  list.matchingWhere.forEach((f: { id: string }) => {<template>
  207.    <xc-match
  208.           v-if="item.children && item.children.length"
  209.           :data="item.children"
  210.         /> <match :data="pageList"></match>
  211. </template><template>
  212.    <xc-match
  213.           v-if="item.children && item.children.length"
  214.           :data="item.children"
  215.         /> <match :data="pageList"></match>
  216. </template>if (f.id == id) {<template>
  217.    <xc-match
  218.           v-if="item.children && item.children.length"
  219.           :data="item.children"
  220.         /> <match :data="pageList"></match>
  221. </template><template>
  222.    <xc-match
  223.           v-if="item.children && item.children.length"
  224.           :data="item.children"
  225.         /> <match :data="pageList"></match>
  226. </template>  //删除当前项<template>
  227.    <xc-match
  228.           v-if="item.children && item.children.length"
  229.           :data="item.children"
  230.         /> <match :data="pageList"></match>
  231. </template><template>
  232.    <xc-match
  233.           v-if="item.children && item.children.length"
  234.           :data="item.children"
  235.         /> <match :data="pageList"></match>
  236. </template>  list.matchingWhere.splice(index, 1);<template>
  237.    <xc-match
  238.           v-if="item.children && item.children.length"
  239.           :data="item.children"
  240.         /> <match :data="pageList"></match>
  241. </template><template>
  242.    <xc-match
  243.           v-if="item.children && item.children.length"
  244.           :data="item.children"
  245.         /> <match :data="pageList"></match>
  246. </template>  if (list.matchingWhere.length == 0) {<template>
  247.    <xc-match
  248.           v-if="item.children && item.children.length"
  249.           :data="item.children"
  250.         /> <match :data="pageList"></match>
  251. </template><template>
  252.    <xc-match
  253.           v-if="item.children && item.children.length"
  254.           :data="item.children"
  255.         /> <match :data="pageList"></match>
  256. </template><template>
  257.    <xc-match
  258.           v-if="item.children && item.children.length"
  259.           :data="item.children"
  260.         /> <match :data="pageList"></match>
  261. </template>var parentGroup = props.data.filter((s) => s.id == list.pid);<template>
  262.    <xc-match
  263.           v-if="item.children && item.children.length"
  264.           :data="item.children"
  265.         /> <match :data="pageList"></match>
  266. </template><template>
  267.    <xc-match
  268.           v-if="item.children && item.children.length"
  269.           :data="item.children"
  270.         /> <match :data="pageList"></match>
  271. </template><template>
  272.    <xc-match
  273.           v-if="item.children && item.children.length"
  274.           :data="item.children"
  275.         /> <match :data="pageList"></match>
  276. </template>//当前组下无任何项并且层级不等于1，删除当前组<template>
  277.    <xc-match
  278.           v-if="item.children && item.children.length"
  279.           :data="item.children"
  280.         /> <match :data="pageList"></match>
  281. </template><template>
  282.    <xc-match
  283.           v-if="item.children && item.children.length"
  284.           :data="item.children"
  285.         /> <match :data="pageList"></match>
  286. </template><template>
  287.    <xc-match
  288.           v-if="item.children && item.children.length"
  289.           :data="item.children"
  290.         /> <match :data="pageList"></match>
  291. </template>if (parentGroup.length == 0 && list.level !== 1) {<template>
  292.    <xc-match
  293.           v-if="item.children && item.children.length"
  294.           :data="item.children"
  295.         /> <match :data="pageList"></match>
  296. </template><template>
  297.    <xc-match
  298.           v-if="item.children && item.children.length"
  299.           :data="item.children"
  300.         /> <match :data="pageList"></match>
  301. </template><template>
  302.    <xc-match
  303.           v-if="item.children && item.children.length"
  304.           :data="item.children"
  305.         /> <match :data="pageList"></match>
  306. </template>  GetGroupSpliceIndex(list.id, props.data);<template>
  307.    <xc-match
  308.           v-if="item.children && item.children.length"
  309.           :data="item.children"
  310.         /> <match :data="pageList"></match>
  311. </template><template>
  312.    <xc-match
  313.           v-if="item.children && item.children.length"
  314.           :data="item.children"
  315.         /> <match :data="pageList"></match>
  316. </template><template>
  317.    <xc-match
  318.           v-if="item.children && item.children.length"
  319.           :data="item.children"
  320.         /> <match :data="pageList"></match>
  321. </template>}<template>
  322.    <xc-match
  323.           v-if="item.children && item.children.length"
  324.           :data="item.children"
  325.         /> <match :data="pageList"></match>
  326. </template><template>
  327.    <xc-match
  328.           v-if="item.children && item.children.length"
  329.           :data="item.children"
  330.         /> <match :data="pageList"></match>
  331. </template>  }<template>
  332.    <xc-match
  333.           v-if="item.children && item.children.length"
  334.           :data="item.children"
  335.         /> <match :data="pageList"></match>
  336. </template><template>
  337.    <xc-match
  338.           v-if="item.children && item.children.length"
  339.           :data="item.children"
  340.         /> <match :data="pageList"></match>
  341. </template>}<template>
  342.    <xc-match
  343.           v-if="item.children && item.children.length"
  344.           :data="item.children"
  345.         /> <match :data="pageList"></match>
  346. </template>  });<template>
  347.    <xc-match
  348.           v-if="item.children && item.children.length"
  349.           :data="item.children"
  350.         /> <match :data="pageList"></match>
  351. </template>};
复制代码
View Code查看效果，如下图↓
22.gif

验证条件是否完整
编写验证方法
23.gif
24.gif
  1. //验证条件是否为空<template>
  2.    <xc-match
  3.           v-if="item.children && item.children.length"
  4.           :data="item.children"
  5.         /> <match :data="pageList"></match>
  6. </template>const VerifyWhereEmpty = function () {<template>
  7.    <xc-match
  8.           v-if="item.children && item.children.length"
  9.           :data="item.children"
  10.         /> <match :data="pageList"></match>
  11. </template>  const isTrueArray = ref([]);<template>
  12.    <xc-match
  13.           v-if="item.children && item.children.length"
  14.           :data="item.children"
  15.         /> <match :data="pageList"></match>
  16. </template>  VerifyFunction(props.data, isTrueArray.value);<template>
  17.    <xc-match
  18.           v-if="item.children && item.children.length"
  19.           :data="item.children"
  20.         /> <match :data="pageList"></match>
  21. </template>  const trueArray = isTrueArray.value?.filter((f) => f === true);<template>
  22.    <xc-match
  23.           v-if="item.children && item.children.length"
  24.           :data="item.children"
  25.         /> <match :data="pageList"></match>
  26. </template>  if (trueArray.length === 0) {<template>
  27.    <xc-match
  28.           v-if="item.children && item.children.length"
  29.           :data="item.children"
  30.         /> <match :data="pageList"></match>
  31. </template><template>
  32.    <xc-match
  33.           v-if="item.children && item.children.length"
  34.           :data="item.children"
  35.         /> <match :data="pageList"></match>
  36. </template>ElMessage({<template>
  37.    <xc-match
  38.           v-if="item.children && item.children.length"
  39.           :data="item.children"
  40.         /> <match :data="pageList"></match>
  41. </template><template>
  42.    <xc-match
  43.           v-if="item.children && item.children.length"
  44.           :data="item.children"
  45.         /> <match :data="pageList"></match>
  46. </template>  message: "成功",<template>
  47.    <xc-match
  48.           v-if="item.children && item.children.length"
  49.           :data="item.children"
  50.         /> <match :data="pageList"></match>
  51. </template><template>
  52.    <xc-match
  53.           v-if="item.children && item.children.length"
  54.           :data="item.children"
  55.         /> <match :data="pageList"></match>
  56. </template>  type: "warning",<template>
  57.    <xc-match
  58.           v-if="item.children && item.children.length"
  59.           :data="item.children"
  60.         /> <match :data="pageList"></match>
  61. </template><template>
  62.    <xc-match
  63.           v-if="item.children && item.children.length"
  64.           :data="item.children"
  65.         /> <match :data="pageList"></match>
  66. </template>});<template>
  67.    <xc-match
  68.           v-if="item.children && item.children.length"
  69.           :data="item.children"
  70.         /> <match :data="pageList"></match>
  71. </template>  } else {<template>
  72.    <xc-match
  73.           v-if="item.children && item.children.length"
  74.           :data="item.children"
  75.         /> <match :data="pageList"></match>
  76. </template><template>
  77.    <xc-match
  78.           v-if="item.children && item.children.length"
  79.           :data="item.children"
  80.         /> <match :data="pageList"></match>
  81. </template>ElMessage({<template>
  82.    <xc-match
  83.           v-if="item.children && item.children.length"
  84.           :data="item.children"
  85.         /> <match :data="pageList"></match>
  86. </template><template>
  87.    <xc-match
  88.           v-if="item.children && item.children.length"
  89.           :data="item.children"
  90.         /> <match :data="pageList"></match>
  91. </template>  message: "匹配条件未填写完整",<template>
  92.    <xc-match
  93.           v-if="item.children && item.children.length"
  94.           :data="item.children"
  95.         /> <match :data="pageList"></match>
  96. </template><template>
  97.    <xc-match
  98.           v-if="item.children && item.children.length"
  99.           :data="item.children"
  100.         /> <match :data="pageList"></match>
  101. </template>  type: "warning",<template>
  102.    <xc-match
  103.           v-if="item.children && item.children.length"
  104.           :data="item.children"
  105.         /> <match :data="pageList"></match>
  106. </template><template>
  107.    <xc-match
  108.           v-if="item.children && item.children.length"
  109.           :data="item.children"
  110.         /> <match :data="pageList"></match>
  111. </template>});<template>
  112.    <xc-match
  113.           v-if="item.children && item.children.length"
  114.           :data="item.children"
  115.         /> <match :data="pageList"></match>
  116. </template>  }<template>
  117.    <xc-match
  118.           v-if="item.children && item.children.length"
  119.           :data="item.children"
  120.         /> <match :data="pageList"></match>
  121. </template>};<template>
  122.    <xc-match
  123.           v-if="item.children && item.children.length"
  124.           :data="item.children"
  125.         /> <match :data="pageList"></match>
  126. </template>//递归验证<template>
  127.    <xc-match
  128.           v-if="item.children && item.children.length"
  129.           :data="item.children"
  130.         /> <match :data="pageList"></match>
  131. </template>const VerifyFunction = function (<template>
  132.    <xc-match
  133.           v-if="item.children && item.children.length"
  134.           :data="item.children"
  135.         /> <match :data="pageList"></match>
  136. </template>  list: matchingData[],<template>
  137.    <xc-match
  138.           v-if="item.children && item.children.length"
  139.           :data="item.children"
  140.         /> <match :data="pageList"></match>
  141. </template>  isTrueArray: boolean[]<template>
  142.    <xc-match
  143.           v-if="item.children && item.children.length"
  144.           :data="item.children"
  145.         /> <match :data="pageList"></match>
  146. </template>) {<template>
  147.    <xc-match
  148.           v-if="item.children && item.children.length"
  149.           :data="item.children"
  150.         /> <match :data="pageList"></match>
  151. </template>  list.forEach((element) => {<template>
  152.    <xc-match
  153.           v-if="item.children && item.children.length"
  154.           :data="item.children"
  155.         /> <match :data="pageList"></match>
  156. </template><template>
  157.    <xc-match
  158.           v-if="item.children && item.children.length"
  159.           :data="item.children"
  160.         /> <match :data="pageList"></match>
  161. </template>element.matchingWhere.forEach((w) => {<template>
  162.    <xc-match
  163.           v-if="item.children && item.children.length"
  164.           :data="item.children"
  165.         /> <match :data="pageList"></match>
  166. </template><template>
  167.    <xc-match
  168.           v-if="item.children && item.children.length"
  169.           :data="item.children"
  170.         /> <match :data="pageList"></match>
  171. </template>  if (<template>
  172.    <xc-match
  173.           v-if="item.children && item.children.length"
  174.           :data="item.children"
  175.         /> <match :data="pageList"></match>
  176. </template><template>
  177.    <xc-match
  178.           v-if="item.children && item.children.length"
  179.           :data="item.children"
  180.         /> <match :data="pageList"></match>
  181. </template><template>
  182.    <xc-match
  183.           v-if="item.children && item.children.length"
  184.           :data="item.children"
  185.         /> <match :data="pageList"></match>
  186. </template>w.matchEquationKey.length == 0 ||<template>
  187.    <xc-match
  188.           v-if="item.children && item.children.length"
  189.           :data="item.children"
  190.         /> <match :data="pageList"></match>
  191. </template><template>
  192.    <xc-match
  193.           v-if="item.children && item.children.length"
  194.           :data="item.children"
  195.         /> <match :data="pageList"></match>
  196. </template><template>
  197.    <xc-match
  198.           v-if="item.children && item.children.length"
  199.           :data="item.children"
  200.         /> <match :data="pageList"></match>
  201. </template>w.matchDataKey.length == 0 ||<template>
  202.    <xc-match
  203.           v-if="item.children && item.children.length"
  204.           :data="item.children"
  205.         /> <match :data="pageList"></match>
  206. </template><template>
  207.    <xc-match
  208.           v-if="item.children && item.children.length"
  209.           :data="item.children"
  210.         /> <match :data="pageList"></match>
  211. </template><template>
  212.    <xc-match
  213.           v-if="item.children && item.children.length"
  214.           :data="item.children"
  215.         /> <match :data="pageList"></match>
  216. </template>w.fieldKey.length == 0<template>
  217.    <xc-match
  218.           v-if="item.children && item.children.length"
  219.           :data="item.children"
  220.         /> <match :data="pageList"></match>
  221. </template><template>
  222.    <xc-match
  223.           v-if="item.children && item.children.length"
  224.           :data="item.children"
  225.         /> <match :data="pageList"></match>
  226. </template>  ) {<template>
  227.    <xc-match
  228.           v-if="item.children && item.children.length"
  229.           :data="item.children"
  230.         /> <match :data="pageList"></match>
  231. </template><template>
  232.    <xc-match
  233.           v-if="item.children && item.children.length"
  234.           :data="item.children"
  235.         /> <match :data="pageList"></match>
  236. </template><template>
  237.    <xc-match
  238.           v-if="item.children && item.children.length"
  239.           :data="item.children"
  240.         /> <match :data="pageList"></match>
  241. </template>isTrueArray.push(true);<template>
  242.    <xc-match
  243.           v-if="item.children && item.children.length"
  244.           :data="item.children"
  245.         /> <match :data="pageList"></match>
  246. </template><template>
  247.    <xc-match
  248.           v-if="item.children && item.children.length"
  249.           :data="item.children"
  250.         /> <match :data="pageList"></match>
  251. </template><template>
  252.    <xc-match
  253.           v-if="item.children && item.children.length"
  254.           :data="item.children"
  255.         /> <match :data="pageList"></match>
  256. </template>return;<template>
  257.    <xc-match
  258.           v-if="item.children && item.children.length"
  259.           :data="item.children"
  260.         /> <match :data="pageList"></match>
  261. </template><template>
  262.    <xc-match
  263.           v-if="item.children && item.children.length"
  264.           :data="item.children"
  265.         /> <match :data="pageList"></match>
  266. </template>  }<template>
  267.    <xc-match
  268.           v-if="item.children && item.children.length"
  269.           :data="item.children"
  270.         /> <match :data="pageList"></match>
  271. </template><template>
  272.    <xc-match
  273.           v-if="item.children && item.children.length"
  274.           :data="item.children"
  275.         /> <match :data="pageList"></match>
  276. </template>});<template>
  277.    <xc-match
  278.           v-if="item.children && item.children.length"
  279.           :data="item.children"
  280.         /> <match :data="pageList"></match>
  281. </template><template>
  282.    <xc-match
  283.           v-if="item.children && item.children.length"
  284.           :data="item.children"
  285.         /> <match :data="pageList"></match>
  286. </template>if (element.children.length > 0) {<template>
  287.    <xc-match
  288.           v-if="item.children && item.children.length"
  289.           :data="item.children"
  290.         /> <match :data="pageList"></match>
  291. </template><template>
  292.    <xc-match
  293.           v-if="item.children && item.children.length"
  294.           :data="item.children"
  295.         /> <match :data="pageList"></match>
  296. </template>  VerifyFunction(element.children, isTrueArray);<template>
  297.    <xc-match
  298.           v-if="item.children && item.children.length"
  299.           :data="item.children"
  300.         /> <match :data="pageList"></match>
  301. </template><template>
  302.    <xc-match
  303.           v-if="item.children && item.children.length"
  304.           :data="item.children"
  305.         /> <match :data="pageList"></match>
  306. </template>}<template>
  307.    <xc-match
  308.           v-if="item.children && item.children.length"
  309.           :data="item.children"
  310.         /> <match :data="pageList"></match>
  311. </template>  });<template>
  312.    <xc-match
  313.           v-if="item.children && item.children.length"
  314.           :data="item.children"
  315.         /> <match :data="pageList"></match>
  316. </template>};
复制代码
View Code在index.vue 页面调用
25.gif
26.gif
  1. <template>
  2.    <xc-match
  3.           v-if="item.children && item.children.length"
  4.           :data="item.children"
  5.         /> <match :data="pageList"></match>
  6. </template><template>
  7.    <xc-match
  8.           v-if="item.children && item.children.length"
  9.           :data="item.children"
  10.         /> <match :data="pageList"></match>
  11. </template><template>
  12.    <xc-match
  13.           v-if="item.children && item.children.length"
  14.           :data="item.children"
  15.         /> <match :data="pageList"></match>
  16. </template>保存<template>
  17.    <xc-match
  18.           v-if="item.children && item.children.length"
  19.           :data="item.children"
  20.         /> <match :data="pageList"></match>
  21. </template><template>
  22.    <xc-match
  23.           v-if="item.children && item.children.length"
  24.           :data="item.children"
  25.         /> <match :data="pageList"></match>
  26. </template>  
复制代码
View Code做完这些就能达到最终效果
 
需要源码的，关注公众号，发送【权限】获取源码
以上就是本篇文章的全部内容，感谢耐心观看
后端WebApi 预览地址：http://139.155.137.144:8880/swagger/index.html
前端vue 预览地址：http://139.155.137.144:8881
关注公众号：发送【权限】，获取源码
有兴趣的朋友，请关注我微信公众号吧(*^▽^*)。
27.bmp

关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界
 
 
 
 
 
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
仁夹篇
4 天前

0

粉丝关注

13

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫