vue 后台权限功能

最终效果图

代码

<template>
      <div class="roles">
        <div class="roles_box" v-for="item in treeData" :key="item.id">
          <div class="roles_box_left">
            <div class="tree_box">
              <a-checkbox @change="onChange(item)" :checked="item.checked">
                {{ item.name }}
              </a-checkbox>
            </div>
          </div>
          <div class="roles_box_right" v-for="children in item.children" :key="children.id">
            <div class="box_item">
              <div class="right_header">
                <div class="tree_box">
                  <a-checkbox @change="onChange(children)" :checked="children.checked">
                    {{ children.name }}
                  </a-checkbox>
                </div>
              </div>
              <div class="right_body">
                <div class="tree_box" v-for="btn in children.children" :key="btn.id">
                  <a-checkbox @change="onChange(btn)" :checked="btn.checked">
                    {{ btn.name }}
                  </a-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--        <div class="roles_box">-->
        <!--          <div class="roles_box_left">-->
        <!--            <div class="tree_box">-->
        <!--              <a-checkbox @change="onChange">-->
        <!--                xx管理-->
        <!--              </a-checkbox>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <div class="roles_box_right">-->
        <!--            <div class="box_item">-->
        <!--              <div class="right_header">-->
        <!--                <div class="tree_box">-->
        <!--                  <a-checkbox @change="onChange">-->
        <!--                    xxx管理-->
        <!--                  </a-checkbox>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--              <div class="right_body">-->
        <!--                <div class="tree_box">-->
        <!--                  <a-checkbox @change="onChange">-->
        <!--                    xx列表查询-->
        <!--                  </a-checkbox>-->
        <!--                </div>-->
        <!--                <div class="tree_box">-->
        <!--                  <a-checkbox @change="onChange">-->
        <!--                    xx新增-->
        <!--                  </a-checkbox>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
  </div>
</template>

<script>

  export default {
    name: 'modal',
    data() {
      return {
        treeData: [
          {
            "id": 21,
            "name": "电名水报",
            "checked": false,
            "children": [
              {
                "id": "120116200911273959",
                "name": "众亲压",
                "checked": false
              }
            ] ,
          },
        ],
      }
    },
    created() {
    },
    methods: {
      /**
       * 选中元素子类同时选中
       * @param data Object
       **/
      boxChildrenCheck(o) {
        o.checked = !o.checked
        o?.children.forEach((item) => {
          item.checked = !o.checked
          this.boxChildrenCheck(item)
        })
      },
      /**
       * 根据选中状态设置上一级选中的事件
       * @param data Array
       */
      boxChangeCheck(data) {
        if (data.length === 0) return []
        data.forEach((item) => {
          let checkNum = 0
          item?.children.forEach((element) => {
            element.checked && checkNum++
            this.boxChangeCheck(element.children)
          })
          if (item?.children.length === checkNum) item.checked = true
        })
        this.$forceUpdate()
      },
      /**
       * 点击事件重新渲染元素
       **/
      onChange(e) {
        this.boxChildrenCheck(e)
        this.boxChangeCheck(this.treeData)
      },
      /**
       * 获取选中树的id
       **/
      getBoxCheckId(list) {
        let id = []
        list.forEach((element) => {
          element.checked && id.push(element.id)
          id = id.concat(this.getBoxCheckId(element.children))
        })
        return id
      },
    },
  }
</script>

<style lang="scss" scoped>
  .role_modal {
    .roles {
      min-height: 300px;
      max-height: 800px;
      overflow-y: auto;

      .roles_box {
        display: flex;

        .tree_box {
          margin-right: 10px;
        }

        .roles_box_left {
          width: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #e8e8e8;
        }

        .roles_box_right {
          border: 1px solid #e8e8e8;
          border-left: none;
          width: 100%;

          .box_item {
            border-bottom: 1px solid #e8e8e8;
            padding: 15px;

            &:last-child {
              border-bottom: none;
            }

            .right_header {
            }

            .right_body {
              display: flex;

              div:first-child {
                margin-top: 15px;
              }
            }
          }
        }
      }
    }
  }
</style>