一:效果图如下:
二:实现过程
(2-1)通过角色id获取须要要数据
因为我这个性能是角色调配权限，所有这里是通过角色id获取已调配的权限菜单以及全副菜单
而后在获取到树结构的菜单数据
代码如下:
/** * 调配权限按钮 */ permissions(row) { this.permissionsConfirmLoading = true getRoleTree(row.roleId) .then(res => { // 获取以后用户角色调配菜单的id data例如:[1002, 1003, 1004, 1213, 1214, 1000, 1001] this.checkedKeys = res.data.data.checkedMenuId // 获取菜单的全副id data例如[1002, 1003, 1004, 1213, 1214, 1000, 1001] this.allMenuIds = res.data.data.menuIds // 这一步是预防用户不点击节点选项间接保留 this.menuIds = res.data.data.checkedMenuId.join(',') return getMenuTree() }) .then(response => { this.treeData = response.data.data this.roleId = row.roleId this.permissionsConfirmLoading = false this.permissionsModalVisible = true }) }(2-2)页面的配置
代码如下:
<a-modal :visible="permissionsModalVisible" title="调配权限" :width="740" @cancel="permissionsModalVisible = false" > <a-spin :spinning="permissionsConfirmLoading"> <a-tree ref="roleTree" :checked-keys="checkedKeys" :selected-keys="selectedKeys" checkable :check-strictly="checkStrictly" :expanded-keys="expandedKeys" :tree-data="treeData" :replace-fields="{ key:'id' }" @check="onChangePermissionsTree" @select="onTreeNodeSelect" @expand="onExpand" /> </a-spin> <template slot="footer"> <a-dropdown style="float: left" :trigger="['click']" placement="topCenter"> <a-menu slot="overlay"> <a-menu-item key="1" @click="switchCheckStrictly(1)"> 父子关联 </a-menu-item> <a-menu-item key="2" @click="switchCheckStrictly(2)"> 勾销关联 </a-menu-item> <a-menu-item key="3" @click="checkALL"> 全副勾选 </a-menu-item> <a-menu-item key="4" @click="cancelCheckALL"> 勾销全选 </a-menu-item> <a-menu-item key="5" @click="expandAll"> 开展所有 </a-menu-item> <a-menu-item key="6" @click="closeAll"> 合并所有 </a-menu-item> </a-menu> <a-button> 树操作 <a-icon type="up" /> </a-button> </a-dropdown> <a-button @click="permissionsModalVisible = false"> cancal </a-button> <a-button type="primary" @click="permissionsModalSubmit"> ok </a-button> </template> </a-modal>(2-3)对应的办法
代码如下:
// 是否设置树组件父子关联 switchCheckStrictly(v) { if (v === 1) { this.checkStrictly = false } else if (v === 2) { this.checkStrictly = true } }, // 是否设置树组件全副勾选 checkALL() { this.checkedKeys = this.allMenuIds }, // 是否设置树组件勾销全副勾选 cancelCheckALL() { this.checkedKeys = [] }, // 树组件全副开展 expandAll() { this.expandedKeys = this.allMenuIds }, // 树组件全副闭合 closeAll() { this.expandedKeys = [] }, // 树组件开展触发 onExpand(expandedKeys) { this.expandedKeys = expandedKeys }, // 点击树节点触发 onTreeNodeSelect(id) { if (id && id.length > 0) { this.selectedKeys = id } }, // 点击复选框，获取曾经选中的复选项id+半选id onChangePermissionsTree(node, event) { if (this.checkStrictly) { this.checkedKeys = node.checked } else { this.checkedKeys = node } },(2-4)最初的保留
// 更新权限 permissionsModalSubmit() { updPermissions(this.roleId, this.checkedKeys.join(',')).then(res => { if (res.data.data) { // resetRouter() store.dispatch('GenerateRoutes') // 刷新菜单 // store.dispatch('GetInfo') // 刷新用户权限 this.permissionsModalVisible = false return this.$message.success('保留胜利!') } else { return this.$message.error('保留失败!') } }) },最初data的数据(懒的一个一个找进去，自行取须要的)
roleId: '', checkStrictly: true, autoExpandParent: true, loading: false, roleModalTitle: '', roleModalType: 0, roleModalVisible: false, permissionsModalVisible: false, roleConfirmLoading: false, permissionsConfirmLoading: false, formItemLayout: { labelCol: { xs: { span: 24 }, sm: { span: 5 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 13 } } }, // 自定义分页 pagination: { total: 0, defaultPageSize: 10, showTotal: total => `共 ${total} 条数据`, showSizeChanger: true, pageSizeOptions: ['5', '10', '15', '20'], onShowSizeChange: (current, size) => (this.queryParam.size = size), onChange: (page, pageSize) => this.onPageChange(page) }, queryParam: { current: 1, size: 10, roleName: '' }, form: this.$form.createForm(this, 'form'), treeData: [], allMenuIds: [], checkedKeys: [], selectedKeys: [], expandedKeys: [],