组件名cap4-tree

---

引入

import Cap4Tree from 'cap4-pc-ui/lib/cap4-tree';
import 'cap4-pc-ui/lib/cap4-tree/css/cap4-tree.css';

基础用法

/**/

export default {
data() {
return {
// 注意root虚拟节点不显示
treeData: {
name: 'root',
id: 'root',
level: 0,
type: 'ul',
show: true,
branch: true,
showChildren: true,
children: [{
id: '0',
name: '城市',
parentId: 'root',
type: 'ul',
level: 1,
show: true,
branch: true,
showChildren: true,
children: [{
id: '1',
level: 2,
name: '北京',
parentId: '0',
show: true,
branch: false
},
{
id: '2',
level: 2,
name: '上海',
parentId: '0',
show: true,
branch: false
},
{
id: '3',
level: 2,
name: '广州',
parentId: '0',
show: true,
branch: false
}]
}]
},
activeItem: []
};
},
methods: {
childClick(item) {
this.activeItem = [item];
console.log(item);
},
childDbClick(item) {
this.activeItem = [item];
console.log(item);
},
listChoose(id, items) {
console.log(id, items);
}
}
};
/**/::: demo

<template>
    <div
        class="demo-block"
    >
        <cap4-tree
            :treeData="treeData"
            :activeItem="activeItem"
            @childClick="childClick"
            @childDbClick="childDbClick"
        ></cap4-tree>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 注意root虚拟节点不显示
            treeData: {
                name: 'root',
                id: 'root',
                level: 0,
                type: 'ul',
                show: true,
                branch: true,
                showChildren: true,
                children: [{
                    id: '0',
                    name: '城市',
                    parentId: 'root',
                    type: 'ul',
                    level: 1,
                    show: true,
                    branch: true,
                    showChildren: true,
                    children: [{
                        id: '1',
                        level: 2,
                        name: '北京',
                        parentId: '0',
                        show: true,
                        branch: false
                    },
                    {
                        id: '2',
                        level: 2,
                        name: '上海',
                        parentId: '0',
                        show: true,
                        branch: false
                    },
                    {
                        id: '3',
                        level: 2,
                        name: '广州',
                        parentId: '0',
                        show: true,
                        branch: false
                    }]
                }]
            },
            activeItem: []
        };
    },
    methods: {
        childClick(item) {
            this.activeItem = [item];
            console.log(item);
        },
        childDbClick(item) {
            this.activeItem = [item];
            console.log(item);
        },
        listChoose(id, items) {
            console.log(id, items);
        }
    }
};
</script>

:::

Attributes

参数	说明	类型	可选值	默认值
treeData	数据 (必填))	Object	—	''
activeItem	选中项 (选填))	Array	—
showFull	全称 (选填))	Boolean	—
showFolderIcon	显示文件夹图标 (选填))	Boolean	—

Event

事件名称	说明	回调参数
childClick	单击	item
childDbClick	双击	item
listChoose	多选	id, items

创建人：yinyanting

快速跳转

• 组件名cap4-tree
  • 引入
  • 基础用法
  • Attributes
  • Event