Element Ui Tree组件使用 选择权限 节点操作

工作上使用到element-ui tree 组件，主要功能是数据渲染成树状图，选择节点记录，做到权限设置
官方跳装地址---------Element tree

项目样式 根据角色选择权限

html 部分

     <!-- element tree 组件 -->
     <el-form-item label="选择权限" prop="editjurisdiction">
       <el-tree 
         :data="editjurisdiction"  
         :default-checked-keys='defaultKyes' 
         show-checkbox 
         default-expand-all 
         node-key="id" 
         ref="tree1" 
         highlight-current
         :props="defaultProps">
       </el-tree>
     </el-form-item>

参数解释 只标注几个我用到的 官方文档全面
:data 展示数据
:default-checked-keys 默认勾选的节点的 key 的数组
show-checkbox 节点是否可被选择
default-expand-all 是否默认展开所有节点
node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
highlight-current 是否高亮当前选中节点
:props 自己定义数组参数

data 部分

//数据
editjurisdiction: [{
	"id": 24,
	"fid": 0,
	"name": "首页",
	"menu_route": "/view",
	"auth_value": null,
	"sort": 0
}, {
	"id": 26,
	"fid": 0,
	"name": "管理员管理",
	"menu_route": "/administrator",
	"auth_value": null,
	"sort": 0
}, {
	"id": 27,
	"fid": 0,
	"name": "角色管理",
	"menu_route": "/role",
	"auth_value": null,
	"sort": 0
}, {
	"id": 28,
	"fid": 0,
	"name": "菜单管理",
	"menu_route": "/menumanagement",
	"auth_value": null,
	"sort": 0
}, {
	"id": 29,
	"fid": 0,
	"name": "权限管理",
	"menu_route": "/jurisdiction",
	"auth_value": null,
	"sort": 0
}, {
	"id": 39,
	"fid": 0,
	"name": "平台道具管理",
	"menu_route": "/props",
	"auth_value": null,
	"sort": 0
}, {
	"id": 40,
	"fid": 0,
	"name": "平台充值管理",
	"menu_route": "/11",
	"auth_value": null,
	"sort": 0,
	"child": [{
		"id": 41,
		"fid": 40,
		"name": "海外SDK",
		"menu_route": "/overseassdk",
		"auth_value": null,
		"sort": 0,
		"level": 2
	}, {
		"id": 42,
		"fid": 40,
		"name": "国内SDK",
		"menu_route": "/inlandsdk",
		"auth_value": null,
		"sort": 0,
		"level": 2
	}]
}],
// 默认选中
defaultKyes: [], //这里当点击编辑按钮时带id去请求然后赋值
// 规定数组参数  跟后台事先确定好
defaultProps: {
  children: 'child',
  label: 'name'
}

JS 事件部分

//编辑提交
   editSubmit: function () {
     this.$refs.editForm.validate((valid) => {
       if (valid) {
         this.$confirm('确认提交吗？', '提示', {}).then(() => {
           // 返回目前被选中的节点的 key 所组成的数组
           let getCheckedKeys = this.$refs.tree1.getCheckedKeys()
           // 返回目前半选中的节点所组成的数组
           let getHalfCheckedKeys = this.$refs.tree1.getHalfCheckedKeys()
           getCheckedKeys = getCheckedKeys.concat(getHalfCheckedKeys).join(',')
           console.log(getCheckedKeys)
           if(getCheckedKeys == ''){
             this.$message('请选择权限')
             return
           }
			
           //下边就时axios 操作
           this.$post('/role/save', {
             role_id: this.editForm.id,
             role_name: this.editForm.editname,
             role_describe: this.editForm.editdescribe,
             menu_value: getCheckedKeys
           }).then((result) => {
             if (result.code == 200) {
               this.editFormVisible = false;
               this.$message({
                 message: '提交成功',
                 type: 'success'
               });      
               this.getUsers();//刷新
             } else {
               this.$message('提交失败')
             }
           }).catch(() => {
              this.$message('网络连接错误')
           });
         })
         
       }
     });
   }

总结

有问题欢迎留言私信，也可以留下更好的方案和思路，一起学习完善。
对你有帮助的话可以点个赞哦！！！