elemenUi_功能块_权限管理

最新推荐文章于 2024-04-13 15:10:17 发布

黄桃罐头甜甜甜

最新推荐文章于 2024-04-13 15:10:17 发布

阅读量265

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： elementUI 代码块

本文链接：https://blog.youkuaiyun.com/weixin_41246577/article/details/95489694

vue 专栏收录该内容

15 篇文章

订阅专栏

本文主要探讨如何使用ElementUI组件库在HTML中实现细致的权限管理功能，帮助开发者构建更加安全和定制化的用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<el-form-item label="授权管理">
  <div v-for="Menuitem in menu" v-bind:key="Menuitem.id">
    <el-checkbox
      :label="Menuitem.indexCode"
      class="MenuItem"
      v-model="Menuitem.isSelect"
      @change="select => handleCheckFirstChange(select, Menuitem)"
      >{{ Menuitem.name }}
    </el-checkbox>
    <div style="margin-left: 20px;">
      <el-checkbox
        v-for="subMenuitem in Menuitem.subMenu"
        v-bind:key="subMenuitem.id"
        v-model="subMenuitem.isSelect"
        :label="subMenuitem.indexCode"
        @change="
          select => handleCheckSecondChange(select, subMenuitem)
        "
        >{{ subMenuitem.name }}</el-checkbox
      >
    </div>
  </div>
</el-form-item>
<span slot="footer" class="dialog-footer">
  <el-button @click="cancelDialog" class="dialog-cancal" size="small"
    >取 消</el-button
  >
  <el-button type="primary" @click="comfirmDialog" size="small"
    >确 定</el-button
  >
</span>

data () {
  return {
    menu: [],
    menusIds: [],
  }
},
created () {
  this.getMenuDataPort()
},
methods:{
 getMenuDataPort () {
    service.getMenuDataPort().then(res => {
      this.menu = res.data
    })
  },
    /* 一级菜单点击事件 */
  handleCheckFirstChange (select, Menuitem) {
    let sub = Menuitem.subMenu
    if (!this.initFlag) {
      for (let i = 0; i < sub.length; i++) {
        sub[i].isSelect = select
      }
    }
  },
    /* 二级菜单点击事件 */
  handleCheckSecondChange (select, subMenuitem) {
    if (select) {
      this.menu.filter(item => {
        if (item.indexCode === subMenuitem.parentIndex) {
          return (item.isSelect = true)
        }
      })
    } else {
      this.menu.filter(item => {
        if (item.indexCode === subMenuitem.parentIndex) {
          let flag = item.subMenu.some(subItem => {
            return subItem.isSelect === true
          })
          if (flag) {
            item.isSelect = true
          } else {
            item.isSelect = false
          }
        }
      })
    }

    subMenuitem.isSelect = select
  },
   cancelDialog () {
    this.dialogAttribute.dialogVisible = false
    this.roleDate = {
      id: '',
      roleName: '',
      remark: '',
      menuIndexs: []
    }
  },
  comfirmDialog () {
    this.roleForm.menuIndexs = []
    for (let i = 0; i < this.menu.length; i++) {
      let menuItem = this.menu[i]
      if (menuItem.isSelect) {
        this.roleForm.menuIndexs.push(menuItem.indexCode)

        for (let j = 0; j < menuItem.subMenu.length; j++) {
          let subItem = menuItem.subMenu[j]
          if (subItem.isSelect) {
            this.roleForm.menuIndexs.push(subItem.indexCode)
          }
        }
      }
    }
    if (this.roleForm.id === '') {
      this.addRolePort(this.roleForm)
    } else {
      // console.log(this.roleForm)
      this.editRolePort(this.roleForm)
    }
  },
  /* 清空选中（用于点击新增前或者完成编辑新增之后） */
  initCheecks () {
  this.menu.forEach(element => {
    element.isSelect = false
    if (element.subMenu.length > 0) {
      element.subMenu.forEach(item => {
        item.isSelect = false
      })
    }
  })
}
}