美文网首页
vue 后台权限功能

vue 后台权限功能

作者: 如风_周 | 来源:发表于2020-08-22 14:28 被阅读0次

    最终效果图

    image.png

    代码

    <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>
    
    

    相关文章

      网友评论

          本文标题:vue 后台权限功能

          本文链接:https://www.haomeiwen.com/subject/lksvjktx.html