iview tree树形菜单实践之渲染模式

项目中，经常会使用到iview，iview中tree是个不错的东西。

本文简单总结一下：树形控件tree的渲染使用。

一.使用

1.引入组件：

show-checkbox：控制单选框的显示

 
1

2.渲染数据的基本格式：

注意：一定要有title属性，否则会渲染出一堆复选框

data:[
       { 
           children:[{
                 
                    id: 62
                    name: "添加用户"
                    pid: 61
                    title: "添加用户"
                  }]
            id: 61,
            pid: 0
            name: "用户管理"
            title: "用户管理"
     }
      { 
           children:[{
                    id:22
                    name: "添加权限"
                    pid: 21
                    title: "添加权限"
                  }]
            id: 21,
            pid: 0
            name: "权限管理hh"
            title: "权限管理hh"
     } 
]
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3.渲染效果图

二.其他属性

1，控制节点是否伸展下拉

expand: true

 baseData: [{
                    expand: true,
                    title: '管理系统',
                    children: [
                      {
                        title: '用户管理',
                        expand: true,
                        // disabled: true,
                        children: [
		                        {
		                         title: '添加用户',
		                         // disableCheckbox: true
		                        },
		                         {
		                            title: '修改用户',
		                        }
                        ]
                    }, 
                    {
                        title: '系统管理',
                        expand: false,
                        checked: true,
                        children: [
		                        {
		                            title: '系统信息',
		                        },
		                        {
		                            title: '系统应用'
		                        }
                        ]
                    }]
                }],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果：

2，禁用节点选中

disabled: true, //控制父节点
disableCheckbox: true //控制子节点

效果：

3，节点是否选中

checked：true//选中

未选中效果：

4，监听选中

on-select-change//点击节点触发
on-check-change//点击复选框触发

 
 
1
2

method中：

    checkMenu(data) {
      console.log("选中的复选框data",data);
      let ids = data.map(item => item.id);
      this.selMenuIds = ids;
    },
    selectMenu(data) {
       console.log("选中的节点data",data);
    },

1
2
3
4
5
6
7
8
9

选中节点数据

选中复选框的数据

5，select下拉框展示tree面板，选中节点值收起tree

效果图

实践链接文章：点击传送