权限树组件封装

最新推荐文章于 2023-04-14 21:24:11 发布

Jim010101

最新推荐文章于 2023-04-14 21:24:11 发布

阅读量219

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_27946017/article/details/120222557

VUE 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何使用Vue组件RoleTree来实现功能权限的选择和回显。在编辑模式下，通过调用RoleApi获取角色详情并加载权限列表，利用el-tree组件展示并设置勾选状态。在节点被点击时，通过checkTree方法更新选中值，并将结果回传。此组件适用于角色管理中的权限分配场景。

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

在这里插入图片描述

调用


import RoleTree from './RoleTree'
<el-form-item label="功能权限" prop="funcId">
	<RoleTree :type="pageType" :row="rowObj" @callBack="funcChange" :key="key" />
</el-form-item>
funcChange(row) {
	this.ruleForm.funcId = row.toString()
	this.$refs.ruleForm.validateField("funcId")
},

代码


<template>
	<!-- 角色管理权限树组件 -->
	<div class="rowTree">
		<el-tree
			ref="treeEdit"
			style="margin-top: 10px"
			:data="data"
			show-checkbox
			:check-strictly="true"
			:destroy-on-close="true"
			node-key="id"
			:props="defaultProps"
			@check="editClickTree"
		>
			<!--  -->

			<!-- :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]" -->
		</el-tree>
	</div>
</template>
 
<script>
import RoleApi from '@/api/account/roleAccount' //API
export default {
	name: 'RoleTree',
	data() {
		return {
			id: '',
			data: [],
			mySoleId: '',

			selection: [],
			funcIdData: [],
			currentRow: {},
			queryParams: {
				page_number: 1,
				page_size: 10,
				name: ''
			},
			data: [],
			total: null,
			defaultProps: {
				children: 'funcs',
				label: 'name',
			},
			listLoading: false,
			pageType: '' //操作类型
		}
	},
	// inject: ['row', 'type'],
	mounted() {
		this.pageType = this.$parent.$parent.$parent.type
		this.id = this.$parent.$parent.$parent.row == {} ? '' : this.$parent.$parent.$parent.row.id
		if (this.pageType === 'edit') {
			this.loadData(this.id)
		} else {
			this.functionsList()
		}
	},
	methods: {
		// 获取详情
		loadData(id) {
			let _this = this
			RoleApi.detail({ id: id }).then((res) => {
				if (res.roleId == null && res.id == 3) {
					res.roleId = 3
				}
				if (res.roleId == null && res.id == 2) {
					res.roleId = 2
				}
				this.functionsList(res.roleId)
				this.currentRow.id = res.roleId
				this.funcIdData = res.idList
				this.mySoleId = res.id

				// 回显
				setTimeout(() => {
					res.idList.forEach((i, n) => {
						let node = _this.$refs.treeEdit.getNode(i)
						if (node) {
							_this.$refs.treeEdit.setChecked(node, true)
						}
					})
				}, 500)
			})
		},
		// 查询权限列表
		functionsList(id) {
			// const roleId = getUser().roleId; // 之前用登录时候返回的roleId请求权限列表（之前roleId也没取过来，等于没传），后来改成用选择的所属角色的id请求权限列表
			RoleApi.fun({ roleId: 1 }).then((response) => {
				const arr = response.list
				if (this.pageType === 'edit') {
					const arr = response.list.concat()
					for (let i = 0; i < arr.length; i++) {
						let children = arr[i].funcs
						if (children !== undefined && children !== null) {
							for (let j = 0; j < children.length; j++) {
								// children[j].disabled = true
								let twoChildren = children[j].funcs
								if (twoChildren !== undefined && twoChildren !== null) {
									for (let k = 0; k < twoChildren.length; k++) {
										// twoChildren[k].disabled = true
									}
								}
							}
						}
						// arr[i].disabled = true
					}
				}

				this.data = arr
			})
		},

		// el-tree点击事件获取值
		editClickTree(data, node) {
			this.funcIdData = this.checkTree(data, node, 'treeEdit')
			this.$emit('callBack', this.funcIdData) //回传选中值
		},
		checkTree(data, node, treeName) {
			const arr = []
			let allNodes = this.$refs[treeName].getNode(data)
			if (allNodes) {
				allNodes.parent &&
					this.setParentChecked(allNodes.parent, allNodes.checked, treeName)
			}
			let checkedNodes = this.$refs[treeName].getCheckedNodes()
			if (checkedNodes.length > 0) {
				for (let i = 0; i < checkedNodes.length; i++) {
					arr.push(checkedNodes[i].id)
				}
			}
			return arr
		},
		setParentChecked(parent, check, treeName) {
			if (!check) {
				return
			}
			this.$refs[treeName].setChecked(parent, check)
			if (parent && parent.parent) {
				this.setParentChecked(parent.parent, check, treeName)
			}
		}
	},
	created() {}
}
</script>
<style lang="scss" scoped>
.rowTree {
	height: auto;
	max-height: 200px;
	width: 100%;
	overflow: auto;
}
</style>