iview 实现 tree

这篇博客介绍了如何利用iView UI库来实现Tree组件。通过提供的文档地址http://v1.iviewui.com/components/tree,可以获取详细步骤。文章核心内容包括Tree组件的代码实现和如何处理父子节点的关联关系,适用于前端界面的构建。
摘要由CSDN通过智能技术生成
  1. 文档地址:

    http://v1.iviewui.com/components/tree

2.代码实现

  show-checkbox:允许展示选择框
  <Tree ref="tree" :data="permissions" show-checkbox></Tree>

  实现:
  async getResource () {
            let res = JSON.parse(JSON.stringify(this.allResource))
            this.dealPostData(res)
            this.permissions = res
        },
        dealPostData (data) {
            data.forEach(element => {
                element.title = element.name
                element.expand = true
                this.permissionSync(this.resources, element) // this.resources 选中的数据
                if (element.children != null) {
                    this.dealPostData(element.children)
                }
            })
        },
        permissionSync (data, ro) {
            if (data != null && data.length > 0) {
              
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview中,原生的下拉菜单并不支持以树形菜单的形式展示。然而,有开发者基于iview编写了一个名为iview-select-tree的组件,可以实现下拉菜单的功能。这个组件可以用于单选和多选,还支持验证效果。你可以在这个组件的npm地址上找到它的集成方式。\[1\]\[2\] 使用iview-select-tree的方法是首先引入iview库,然后将iviewtree和select进行结合。通过tree的getCheckedNodes方法可以获取选中的节点数组,然后将这个数组传递给select的options绑定的数组,同时将选中的节点的key赋值给select绑定的值。这样就完成了从tree到select的数据绑定。\[3\] 你可以参考这篇博文了解更多关于iview-select-tree的使用和实现的源代码。\[3\] #### 引用[.reference_title] - *1* *2* [iview下拉菜单iview-select-tree的使用以及iview-select-tree实现的源代码](https://blog.csdn.net/linzhefeng89/article/details/105245236)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [selectTree单选iview+vue](https://blog.csdn.net/qq_43787947/article/details/126005828)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值