树形组件（可动态添加属性、无限嵌套）及递归展示tree数据

 前言：

公司的业务要求，做一个动态添加子属性或统计属性的一个业务，网上没有找到特别合适的，就自己参考了一些demo做了一个小组件，希望大佬们可以多多留言指点！

---

1、做法

要实现动态的渲染我们拿到的不知道有几层的菜单数据，有两种解决方案：

• 操作 dom 去一层一层 添加子菜单（vue 不推荐操作 dom，所以不推荐此方案）
• 将我们的菜单封装到组件中，通过递归组件实现菜单渲染

具体效果如下图：

 

2、数据

options: [
        {
          id: "473d342d-20d9-459c-ab56-bac4abceb7ad",
          tagId: 1,
          joinMethod: "and",
          byProperty: "CompanyName",
          operate: "=",
          targetValue: "尖沙咀新港中心",
          parentTagRuleId: 23,
          child: [
            {
              id: "fd749e7b-7708-41e1-be97-0f5dce627e94",
              tagId: 1,
              joinMethod: "and",
              byProperty: "CompanyName",
              operate: "=",
              targetValue: "尖沙咀新港中心",
              parentTagRuleId: "473d342d-20d9-459c-ab56-bac4abceb7ad",
              child: [
                {
                  id: "fd749e7b-7708-41e1-be97-0f5dce627e94",
                  tagId: 1,
                  joinMethod: "and",
                  byProperty: "CompanyName",
                  operate: "=",
                  targetValue: "尖沙咀新港中心",
                  parentTagRuleId: "473d342d-20d9-459c-ab56-bac4abceb7ad",
                  child: null,
                },
              ],
            },
          ],
        },
        {
          id: "473d342d-20d9-459c-ab56-bac4abceb7ad",
          tagId: 1,
          joinMethod: "and",
          byProperty: "CompanyName",
          operate: "=",
          targetValue: "尖沙咀新港中心",
          parentTagRuleId: 23,
          child: [
            {
              id: "fd749e7b-7708-41e1-be97-0f5dce627e94",
              tagId: 1,
              joinMethod: "and",
              byProperty: "CompanyName",
              operate: "=",
              targetValue: "尖沙咀新港中心",
              parentTagRuleId: "473d342d-20d9-459c-ab56-bac4abceb7ad",
              child: null,
            },
          ],
        },
],

3、组件

父组件：

<template>
  <div style="margin: 0 100px">
    <tag-rule :options="options" :isFirst="isFirst" ref="andOr"></tag-rule>
  </div>
</template>

<script>
import tagRule from "./components/tagRule.vue";
export default {
  components: { tagRule },
  data() {
    return {
      isFirst: true,
      options: [
        {
          id: "473d342d-20d9-459c-ab56-bac4abceb7ad",
          tagId: 1,
          joinMethod: "and",
          byProperty: "CompanyName",
          operate: "=",
          targetValue: "尖沙咀新港中心",
          parentTagRuleId: 23,
          child: [
            {
              id: "fd749e7b-7708-41e1-be97-0f5dce627e94",
              tagId: 1,
              joinMethod: "and",
              byProperty: "CompanyName",
              operate: "=",
              targetValue: "尖沙咀新港中心",
              parentTagRuleId: "473d342d-20d9-459c-ab56-bac4abceb7ad",
              child: [
                {
                  id: "fd749e7b-7708-41e1-be97-0f5dce627e94",
                  tagId: 1,
                  joinMethod: "and",
                  byProperty: "CompanyName",
                  operate: "=",
                  targetValue: "尖沙咀新港中心",
                  parentTagRuleId: "473d342d-20d9-459c-ab56-bac4abceb7ad",
                  child: null,
                },
              ],
            },
          ],
        },
        {
          id: "473d342d-20d9-459c-ab56-bac4abceb7ad",
          tagId: 1,
          joinMethod: "and",
          byProperty: "CompanyName",
          operate: "=",
          targetValue: "尖沙咀新港中心",
          parentTagRuleId: 23,
          child: [
            {
              id: "fd749e7b-7708-41e1-be97-0f5dce627e94",
              tagId: 1,
              joinMethod: "and",
              byProperty: "CompanyName",
              operate: "=",
              targetValue: "尖沙咀新港中心",
              parentTagRuleId: "473d342d-20d9-459c-ab56-bac4abceb7ad",
              child: null,
            },
          ],
        },
      ],
    };
  },
};
</script>

<style>
</style>

子组件：

子组件这里的重点就是组件的name，用来递归调用

<template>
  <div>
    <div
      v-if="options.length == 0 && parentTagRuleId == 23"
      class="and-or-template col-xs-12"
      :class="isFirst ? 'and-or-first' : ''"
    >
      <div class="btn-group col-xs-7 btn-and-or">
        <button @click.prevent="addLine" class="btn btn-xs btn-purple">
          {{ "+madd" }}
        </button>
        <button @click.prevent="addTopGroup()" class="btn btn-xs btn-purple">
          {{ "+(mGroup)" }}
        </button>
      </div>
    </div>
    <div
      v-for="(item, index) in options"
      :key="index"
      class="and-or-template col-xs-12"
      :class="isFirst ? 'and-or-first' : ''"
    >
      <!-- left:and-or   center:data  right:add  -->
      <div class="form-group col-sx-12">
        <div class="btn-group col-xs-7 btn-and-or">
          <button @click.prevent="addLine" class="btn btn-xs btn-purple">
            {{ "+add" }}
          </button>
          <button
            @click.prevent="addGroup(index)"
            class="btn btn-xs btn-purple"
          >
            {{ "+(Group)" }}
          </button>
          <button
            style="margin-right: 10px"
            @click.prevent="deleteGroup(item, index)"
            class="btn btn-xs btn-purple"
          >
            ×
            <i class="fa fa-fw fa-close"></i>
          </button>
        </div>
        <el-form
          :model="item"
          :rules="rules"
          ref="ruleForm"
          size="small"
          label-position="top"
          class="full"
        >
          <el-row style="margin-left: 5px" :gutter="20">
            <el-col :span="3">
              <el-select v-model="item.joinMethod">
                <el-option value="and" :label="'and'"></el-option>
                <el-option value="or" :label="'or'"></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="byProperty">
                <el-select v-model="item.byProperty">
                  <el-option
                    v-for="(item, index) in byProperty"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="operate">
                <el-select v-model="item.operate">
                  <el-option
                    v-for="(item, index) in operate"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="targetValue">
                <el-input v-model="item.targetValue"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 递归嵌套 -->
      <div v-if="item.child">
        <tag-rule
          class="and-or-offset col-xs-11"
          :options="item.child"
        ></tag-rule>
      </div>
    </div>
  </div>
</template>

<script>
// import { getTagViewProperties } from "@/api/uxretail/vip/vipTag.js";
export default {
  name: "tagRule",
  props: {
    options: {
      type: Array,
      require: true,
    },
    isFirst: {
      type: Boolean,
      default: false,
    },
    tagId: {},
  },
  data() {
    return {
      parentTagRuleId: "",
      byProperty: [],
      operate: [">", "=", "<"],
      rules: {
        byProperty: [{ required: true, trigger: ["blur", "change"] }],
        operate: [{ required: true, trigger: ["blur", "change"] }],
        targetValue: [{ required: true, trigger: ["blur", "change"] }],
      },
    };
  },
  methods: {
    addLine() {
      this.options.push({
        joinMethod: "",
        byProperty: "",
        operate: "",
        targetValue: "",
        tagId: this.tagId,
        child: null,
      });
    },
    addGroupItem(data) {
      if (data.child === null || data.child.length === 0) {
        data.child = [
          {
            joinMethod: "",
            byProperty: "",
            operate: "",
            targetValue: "",
            tagId: this.tagId,
            child: null,
          },
        ];
      } else if (data.child.length > 0) {
        data.child.push({
          joinMethod: "",
          byProperty: "",
          operate: "",
          targetValue: "",
          tagId: this.tagId,
          child: null,
        });
      }
      //    else {
      //     this.addGroupItem(data);
      //   }
    },
    addGroup(index) {
      this.addGroupItem(this.options[index]);
      //   console.log("this.$refs.ruleForm", this.$refs.ruleForm.validate());
    },
    addTopGroup() {
      this.options.push({
        joinMethod: "",
        byProperty: "",
        operate: "",
        targetValue: "",
        child: null,
      });
    },
    deleteGroup(item, index) {
      if (item.parentTagRuleId == 23) {
        this.parentTagRuleId = item.parentTagRuleId;
      }
      this.options.splice(index, 1);
      console.log("this.$refs.options", this.options);
    },
    // 校验数据
    // validateForm() {
    //   let flag = null;
    //   this.$refs["ruleForm"].validate((valid) => {
    //     if (valid) {
    //       flag = true;
    //     } else {
    //       flag = false;
    //     }
    //   });
    //   return flag;
    // },
  },
  created() {
    // getTagViewProperties().then((result) => {
    //   this.byProperty = result;
    // });
  },
};
</script>

<style lang="scss">
$more-color: rgb(24, 144, 255);
.and-or-template {
  padding: 8px;
  position: relative;
  border-radius: 3px;
  border: 1px solid $more-color;
  border-top: 3px solid #d2d6de;
  margin-bottom: 15px;
  /* width: 100%; */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: $more-color;
  background-color: rgba(255, 255, 255, 0.9);
}

.and-or-template:before,
.and-or-template:after {
  content: "";
  position: absolute;
  left: -23px;
  width: 22px;
  height: calc(50% + 20px);
  border-color: #c0c5e2;
  border-style: solid;
}
.and-or-template:before {
  top: -18px;
  border-width: 0 0 2px 2px;
}
.and-or-template:after {
  top: 50%;
  border-width: 0 0 0 2px;
}

.and-or-first:before,
.and-or-first:after,
.and-or-template:last-child:after {
  border: none;
}
.col-xs-12 {
  width: 100%;
}
.form-group {
  margin-bottom: 15px;
  padding: 0;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.and-or-offset {
  margin-left: 30px;
}
.col-xs-11 {
  position: relative;
  width: 91.66666667%;
  min-height: 1px;
  padding-left: 15px;
}
.btn-purple-outline {
  color: #6d77b8;
  background-color: transparent;
  background-image: none;
  border-color: #6d77b8;
}
.btn-purple-outline:hover {
  color: #fff;
  background-color: $more-color;
  background-image: none;
  border-color: $more-color;
}
.btn-radius {
  padding: 0;
  width: 22px;
  height: 22px;
  border-radius: 11px;
}
.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-purple,
.btn-purple-outline:hover {
  color: #fff;
  background-color: $more-color;
  border-color: $more-color;
}
.btn-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.col-xs-7,
.col-xs-11 {
  position: relative;
  min-height: 1px;
  padding-right: 5px;
  padding-left: 15px;
  padding-bottom: 10px;
}
.col-xs-7 {
  width: 100%;
}

.btn-and-or button {
  margin-left: 4px;
  margin: 0px 0px 5px 7px;
}
</style>

参考Demo地址：https://github.com/akumatus/FilterBuilder