简介
以下列出的属性、事件、方法,可使用Tree控件实现节点的拖拽功能(可实现修改顺序、更换父级节点功能)、点击节点勾选复选框、只点击箭头图标展开和收缩节点、父子节点不级联勾选、默认展开全部节点功能
基础用法
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
常用属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
data | 展示数据 | array | 是 | 无 |
props | 配置选项,具体看下表 | object | 是 | 无 |
check-strictly | 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false | boolean | 是 | false |
check-on-click-node | 是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。 | boolean | 是 | false |
expand-on-click-node | 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | 是 | true |
default-expand-all | 是否默认展开所有节点 | boolean | 是 | false |
draggable | 是否开启拖拽节点功能 | boolean | 是 | false |
show-checkbox | 节点是否可被选择(开启复选框) | boolean | 是 | false |
props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | 是 | 无 |
children | 指定子树为节点对象的某个属性值 | string | 是 | 无 |
常用事件
事件名称 | 说明 | 回调参数 |
---|
check-change | 节点选中状态发生变化时的回调 | 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 |
node-drag-end | 拖拽结束时(可能未成功)触发的事件 | 共四个参数,依次为:被拖拽节点对应的 Node、结束拖拽时最后进入的节点(可能为空)、被拖拽节点的放置位置(before、after、inner)、event |
常用方法
方法名 | 说明 | 参数 |
---|
getCheckedNodes | 若节点可被选择(即 show-checkbox 为 true),则返回目前被选中的节点所组成的数组 | (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数,1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false |