Vue element el-tree 权限回显

 

data定义的数据

这个是后台返回的所有权限tree的数据格式

因为后台要求修改或添加角色权限 传给他的数据格式 字符串   1,3,4,5,6,8   

 

获取某个角色的权限   后台返回的格式 roleIdList= ["1","3","4","5"],原理是用element tree组件渲染后带有的isLeaf(是否为叶子节点)属性,如果为叶子节点就选中。其实明白原理  这个都很简单的。

原先把权限想复杂了 ,现在写完也就那样了 。

Vue.js中,`el-tree` 和 `vue-draggable` 是两个常用的库,前者用于构建树形结构组件,后者则提供了拖放功能。如果你想在这些库结合使用的情况下回显数据,你需要做以下几个步骤: 1. **安装依赖**: 首先确保已安装 VueElement UI (包含 `el-tree`) 和 draggable-vue(如果需要拖拽功能)。 ```bash npm install element-ui draggable-vue ``` 2. **配置数据结构**: 数据应该是一个嵌套的对象数组,每个节点通常包含 `label`、`children`(子节点列表)、`draggable` 等属性。例如: ```javascript const initialData = [ { label: '根节点', children: [ { label: '子节点A', draggable: true }, { label: '子节点B', draggable: false } ] } ]; ``` 3. **设置回显数据到el-tree上**: 在Vue实例中,你可以通过`v-model`绑定数据到`el-tree`组件: ```html <el-tree :data="initialData" node-key="id" ref="tree"></el-tree> ``` 4. **启用可拖动功能**: 如果你打算允许部分节点拖动,可以在`draggable-vue`的选项里设置: ```javascript import draggable from "draggable-vue"; draggable({ el: '#tree', group: '__tree__', // 绑定到同一组,避免跨节点拖动 drag: function({ event }) { this.$refs.tree.handleDrag(event); } }); ``` 5. **处理回显后的更新**: 当数据从后端获取并需要显示在树中时,可以遍历数据并使用`append`方法动态添加到树中: ```javascript updateTree(data) { data.forEach(node => { if (node.children) { appendChildrenToTree(this.$refs.tree, node.children); } else { this.$refs.tree.appendNode(node); } }); } ``` 6. **相关问题--:** - 如何禁用特定节点的拖放? - 如何处理拖放事件并在回显时保持原有顺序? - 如何在el-tree中实现自定义的拖放策略?
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值