二维 级联多选框 全 写的太乱 一塌糊涂 ant

实现二维数组的级联选择 选子节点 父节点也被选中 选父节点子节点全部被选中
如果子节点是选中状态 点击父节点 则取消选择
如果父节点是选中状态取消最后一个子节点将取消父节点选择

<template>
  <div class="main">
    <div class="main_right">
        <!-- 选择器 -->
      <table border="1">
        <tr
          v-for="(item, index) in menuList"
          class="checkbox_main"
          :key="index"
        >
          <td style="display: flex; height: 100%">
            <div>
              <div
                :class="
                  selected.includes(item.auth) && !disabled
                    ? 'checkbox_selected checkbox_button'
                    : disabled
                    ? 'checkbox_dlsabled checkbox_button'
                    : 'checkbox_button'
                "
                @click="!disabled &&change(item)"
              >
                <a-icon
                  :style="disabled ? 'color:#b8b8b8' : ''"
                  v-show="selected.includes(item.auth)"
                  type="check"
                />
                <input type="checkbox" />
              </div>
              <span>{{ item.title }}</span>
            </div>
          </td>
          <td v-if="item.children" class="children_content">
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: center;
              "
            >
              <div
                v-for="(cont, index) in item.children"
                class="checkbox_main_sub"
                :key="index"
              >
                <div
                  :class="
                    selected.includes(cont.auth) && !disabled
                      ? 'checkbox_selected checkbox_button'
                      : disabled
                      ? 'checkbox_dlsabled checkbox_button'
                      : 'checkbox_button'
                  "
                  @click="!disabled &&change(cont, item)"
                >
                  <a-icon
                    :style="disabled ? 'color:#b8b8b8' : ''"
                    v-show="selected.includes(cont.auth)"
                    type="check"
                  />
                  <input type="checkbox" />
                </div>
                <span>{{ cont.title }}</span>
              </div>
            </div>
          </td>
          <td v-else></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<style lang="less" scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  margin: 0 auto;
  min-width: 150px;
  padding: 10px 0;
  > div {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    margin: auto 0;
  }
}
tr {
  border: 1px solid #dddddd;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: start;
}
table {
  overflow: hidden;
  border: 1px solid #dddddd !important;
}
table,
th,
td {
  border: 0px solid black;
}
.checkbox {

  &_main {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;

    &_sub {
      display: flex;

      align-items: center;
    }
  }
  &_button {
    cursor: auto;
    position: relative;
    height: 0.8rem;
    width: 0.8rem;
    border: 1px solid #979797;
    margin: auto 0;
    margin-right: 6px;
    padding: 2px 5px 2px 0;
    > i {
      position: absolute;
      cursor: auto;
      top: 0;
      margin: 0;
      padding: 0;
      height: 90%;
      width: 90%;
      color: @primary-color;
    }
    > input {
      cursor: auto;
      position: absolute;
      top: 0;
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
    }
  }
  &_selected {
    border: 1px solid @primary-color;
  }
  &_dlsabled {
    background: #f5f5f5;
    border: 1px solid #b8b8b8 !important;
  }
}
</style>
<style lang="less" scoped>
.main {
  width: 100%;
  flex-direction: row;
}
.main_left {
  > .bottom {
    margin-top: 0;
  }
  flex: 1;
  margin-right: 10px;
}
</style>

export default {
  data() {
    return {
      selected: ["SYSTEM_MANAGEMENT"],//选好的数据
      menuList,//二维数组
      disabled: true//是否可以使用
    };
  },
  created() {
    console.log(this.menuList);
  },
  methods: {
  //点击处理
    change(e, parent = "") {
      //判断是否已经存在
        if (this.selected.includes(e.auth)) {
        //存在删除
        //判断是否存在子节点
          if (e.children) {
          //将不节点筛出
            this.selected = this.selected.filter(item => {
              !e.children.includes(item);
            });
            //这是写的啥 忘了 应该没用
            //this.selected.includes(e.auth);
          if (parent) {
          //判断是否有父节点
            let num = 0;
            //遍历子节点总数
            parent.children.map(item => {
              if (this.selected.includes(item.auth)) {
              //计数
                num++;
              }
            });
            if (num == 1) {
              //如果只有一个子节点
              //将子节点与父节点一同筛出
              this.selected = this.selected.filter(item => {
                item !== e.auth ? false : item !== parent.auth ? false : true;
              });
            } else {
            //否则只筛出子节点
              this.selected = this.selected.filter(item => item !== e.auth);
            }

          } else {
          //否则不存在子节点 直接筛
            this.selected = this.selected.filter(item => item !== e);
          }
        } else {
        //否则未存在 进行添加
          if (parent && !this.selected.includes(parent.auth)) {
          //有父节点且不存在 则将父节点与子节点添加
            this.selected.push(e.auth);
            this.selected.push(parent.auth);
          } else if (e.children) {
          //判断是否有子节点 添加
            this.selected.push(e.auth);
            //遍历添加子节点
            e.children.map(item => {
              if (!this.selected.includes(item.auth)) {
                this.selected.push(item.auth);
              }
            });
            //否则没有子节点与父节点正常添加
          } else {
            this.selected.push(e.auth);
          }
        }
      }
  }
}