elementUI Tree 樹形控件的官方使用文檔
更新時間：2019年04月25日 09:30:26 作者：楊楊得懿
這篇文章主要介紹了elementUI Tree 樹形控件的官方使用文檔，用清晰的層級結(jié)構(gòu)展示信息，可展開或折疊。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Tree 樹形控件---官方文檔地址
用清晰的層級結(jié)構(gòu)展示信息，可展開或折疊。
基礎(chǔ)用法
基礎(chǔ)的樹形結(jié)構(gòu)展示。
<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>
可選擇
適用于需要選擇層級時使用。本例還展示了動態(tài)加載節(jié)點數(shù)據(jù)的方法。
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox
@check-change="handleCheckChange">
</el-tree>
<script>
export default {
data() {
return {
props: {
label: 'name',
children: 'zones'
},
count: 1
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region1' }, { name: 'region2' }]);
}
if (node.level > 3) return resolve([]);
var hasChild;
if (node.data.name === 'region1') {
hasChild = true;
} else if (node.data.name === 'region2') {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(() => {
var data;
if (hasChild) {
data = [{
name: 'zone' + this.count++
}, {
name: 'zone' + this.count++
}];
} else {
data = [];
}
resolve(data);
}, 500);
}
}
};
</script>
懶加載自定義葉子節(jié)點
由于在點擊節(jié)點時才進行該層數(shù)據(jù)的獲取，默認情況下 Tree 無法預知某個節(jié)點是否為葉子節(jié)點，所以會為每個節(jié)點添加一個下拉按鈕，如果節(jié)點沒有下層數(shù)據(jù)，則點擊后下拉按鈕會消失。同時，你也可以提前告知 Tree 某個節(jié)點是否為葉子節(jié)點，從而避免在葉子節(jié)點前渲染下拉按鈕。
<el-tree
:props="props1"
:load="loadNode1"
lazy
show-checkbox>
</el-tree>
<script>
export default {
data() {
return {
props1: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
};
},
methods: {
loadNode1(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
</script>
默認展開和默認選中
可將 Tree 的某些節(jié)點設(shè)置為默認展開或默認選中
分別通過default-expanded-keys和default-checked-keys設(shè)置默認展開和默認選中的節(jié)點。需要注意的是，此時必須設(shè)置node-key，其值為節(jié)點數(shù)據(jù)中的一個字段名，該字段在整棵樹中是唯一的。
<el-tree
:data="data2"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps">
</el-tree>
<script>
export default {
data() {
return {
data2: [{
id: 1,
label: '一級 1',
children: [{
id: 4,
label: '二級 1-1',
children: [{
id: 9,
label: '三級 1-1-1'
}, {
id: 10,
label: '三級 1-1-2'
}]
}]
}, {
id: 2,
label: '一級 2',
children: [{
id: 5,
label: '二級 2-1'
}, {
id: 6,
label: '二級 2-2'
}]
}, {
id: 3,
label: '一級 3',
children: [{
id: 7,
label: '二級 3-1'
}, {
id: 8,
label: '二級 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
禁用狀態(tài)
可將 Tree 的某些節(jié)點設(shè)置為禁用狀態(tài)
通過disabled設(shè)置禁用狀態(tài)。
<el-tree
:data="data3"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]">
</el-tree>
<script>
export default {
data() {
return {
data3: [{
id: 1,
label: '一級 2',
children: [{
id: 3,
label: '二級 2-1',
children: [{
id: 4,
label: '三級 3-1-1'
}, {
id: 5,
label: '三級 3-1-2',
disabled: true
}]
}, {
id: 2,
label: '二級 2-2',
disabled: true,
children: [{
id: 6,
label: '三級 3-2-1'
}, {
id: 7,
label: '三級 3-2-2',
disabled: true
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
樹節(jié)點的選擇
本例展示如何獲取和設(shè)置選中節(jié)點。獲取和設(shè)置各有兩種方式：通過 node 或通過 key。如果需要通過 key 來獲取或設(shè)置，則必須設(shè)置node-key。
<el-tree
:data="data2"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
<div class="buttons">
<el-button @click="getCheckedNodes">通過 node 獲取</el-button>
<el-button @click="getCheckedKeys">通過 key 獲取</el-button>
<el-button @click="setCheckedNodes">通過 node 設(shè)置</el-button>
<el-button @click="setCheckedKeys">通過 key 設(shè)置</el-button>
<el-button @click="resetChecked">清空</el-button>
</div>
<script>
export default {
methods: {
getCheckedNodes() {
console.log(this.$refs.tree.getCheckedNodes());
},
getCheckedKeys() {
console.log(this.$refs.tree.getCheckedKeys());
},
setCheckedNodes() {
this.$refs.tree.setCheckedNodes([{
id: 5,
label: '二級 2-1'
}, {
id: 9,
label: '三級 1-1-1'
}]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
data() {
return {
data2: [{
id: 1,
label: '一級 1',
children: [{
id: 4,
label: '二級 1-1',
children: [{
id: 9,
label: '三級 1-1-1'
}, {
id: 10,
label: '三級 1-1-2'
}]
}]
}, {
id: 2,
label: '一級 2',
children: [{
id: 5,
label: '二級 2-1'
}, {
id: 6,
label: '二級 2-2'
}]
}, {
id: 3,
label: '一級 3',
children: [{
id: 7,
label: '二級 3-1'
}, {
id: 8,
label: '二級 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
自定義節(jié)點內(nèi)容
節(jié)點的內(nèi)容支持自定義，可以在節(jié)點區(qū)添加按鈕或圖標等內(nèi)容
可以通過兩種方法進行樹節(jié)點內(nèi)容的自定義：render-content和 scoped slot。使用render-content指定渲染函數(shù)，該函數(shù)返回需要的節(jié)點區(qū)內(nèi)容即可。渲染函數(shù)的用法請參考 Vue 文檔。使用 scoped slot 會傳入兩個參數(shù)node和data，分別表示當前節(jié)點的 Node 對象和當前節(jié)點的數(shù)據(jù)。注意：由于 jsfiddle 不支持 JSX 語法，所以render-content示例在 jsfiddle 中無法運行。但是在實際的項目中，只要正確地配置了相關(guān)依賴，就可以正常運行。
<div class="custom-tree-container">
<div class="block">
<p>使用 render-content</p>
<el-tree
:data="data4"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree>
</div>
<div class="block">
<p>使用 scoped slot</p>
<el-tree
:data="data5"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button
type="text"
size="mini"
@click="() => append(data)">
Append
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(node, data)">
Delete
</el-button>
</span>
</span>
</el-tree>
</div>
</div>
<script>
let id = 1000;
export default {
data() {
const data = [{
id: 1,
label: '一級 1',
children: [{
id: 4,
label: '二級 1-1',
children: [{
id: 9,
label: '三級 1-1-1'
}, {
id: 10,
label: '三級 1-1-2'
}]
}]
}, {
id: 2,
label: '一級 2',
children: [{
id: 5,
label: '二級 2-1'
}, {
id: 6,
label: '二級 2-2'
}]
}, {
id: 3,
label: '一級 3',
children: [{
id: 7,
label: '二級 3-1'
}, {
id: 8,
label: '二級 3-2'
}]
}];
return {
data4: JSON.parse(JSON.stringify(data)),
data5: JSON.parse(JSON.stringify(data))
}
},
methods: {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},
remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
<el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
</span>
</span>);
}
}
};
</script>
<style>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
節(jié)點過濾
通過關(guān)鍵字過濾樹節(jié)點
在需要對節(jié)點進行過濾時，調(diào)用 Tree 實例的filter方法，參數(shù)為關(guān)鍵字。需要注意的是，此時需要設(shè)置filter-node-method，值為過濾函數(shù)。
<el-input
placeholder="輸入關(guān)鍵字進行過濾"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data2"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree2">
</el-tree>
<script>
export default {
watch: {
filterText(val) {
this.$refs.tree2.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
},
data() {
return {
filterText: '',
data2: [{
id: 1,
label: '一級 1',
children: [{
id: 4,
label: '二級 1-1',
children: [{
id: 9,
label: '三級 1-1-1'
}, {
id: 10,
label: '三級 1-1-2'
}]
}]
}, {
id: 2,
label: '一級 2',
children: [{
id: 5,
label: '二級 2-1'
}, {
id: 6,
label: '二級 2-2'
}]
}, {
id: 3,
label: '一級 3',
children: [{
id: 7,
label: '二級 3-1'
}, {
id: 8,
label: '二級 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
手風琴模式
對于同一級的節(jié)點，每次只能展開一個
<el-tree
:data="data"
:props="defaultProps"
accordion
@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>
可拖拽節(jié)點
通過 draggable 屬性可讓節(jié)點變?yōu)榭赏献А?/p>
<el-tree
:data="data6"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag">
</el-tree>
<script>
export default {
data() {
return {
data6: [{
id: 1,
label: '一級 1',
children: [{
id: 4,
label: '二級 1-1',
children: [{
id: 9,
label: '三級 1-1-1'
}, {
id: 10,
label: '三級 1-1-2'
}]
}]
}, {
id: 2,
label: '一級 2',
children: [{
id: 5,
label: '二級 2-1'
}, {
id: 6,
label: '二級 2-2'
}]
}, {
id: 3,
label: '一級 3',
children: [{
id: 7,
label: '二級 3-1'
}, {
id: 8,
label: '二級 3-2',
children: [{
id: 11,
label: '三級 3-2-1'
}, {
id: 12,
label: '三級 3-2-2'
}, {
id: 13,
label: '三級 3-2-3'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleDragStart(node, ev) {
console.log('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log('tree drag end: ', dropNode && dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode) {
return dropNode.data.label !== '二級 3-1';
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('三級 3-1-1') === -1;
}
}
};
</script>
Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| data | 展示數(shù)據(jù) | array | — | — |
| empty-text | 內(nèi)容為空的時候展示的文本 | String | — | — |
| node-key | 每個樹節(jié)點用來作為唯一標識的屬性，整棵樹應(yīng)該是唯一的 | String | — | — |
| props | 配置選項，具體看下表 | object | — | — |
| render-after-expand | 是否在第一次展開某個樹節(jié)點后才渲染其子節(jié)點 | boolean | — | true |
| load | 加載子樹數(shù)據(jù)的方法，僅當 lazy 屬性為true 時生效 | function(node, resolve) | — | — |
| render-content | 樹節(jié)點的內(nèi)容區(qū)的渲染 Function | Function(h, { node, data, store } | — | — |
| highlight-current | 是否高亮當前選中節(jié)點，默認值是 false。 | boolean | — | false |
| default-expand-all | 是否默認展開所有節(jié)點 | boolean | — | false |
| expand-on-click-node | 是否在點擊節(jié)點的時候展開或者收縮節(jié)點， 默認值為 true，如果為 false，則只有點箭頭圖標的時候才會展開或者收縮節(jié)點。 | boolean | — | true |
| auto-expand-parent | 展開子節(jié)點的時候是否自動展開父節(jié)點 | boolean | — | true |
| default-expanded-keys | 默認展開的節(jié)點的 key 的數(shù)組 | array | — | — |
| show-checkbox | 節(jié)點是否可被選擇 | boolean | — | false |
| check-strictly | 在顯示復選框的情況下，是否嚴格的遵循父子不互相關(guān)聯(lián)的做法，默認為 false | boolean | — | false |
| default-checked-keys | 默認勾選的節(jié)點的 key 的數(shù)組 | array | — | — |
| filter-node-method | 對樹節(jié)點進行篩選時執(zhí)行的方法，返回 true 表示這個節(jié)點可以顯示，返回 false 則表示這個節(jié)點會被隱藏 | Function(value, data, node) | — | — |
| accordion | 是否每次只打開一個同級樹節(jié)點展開 | boolean | — | false |
| indent | 相鄰級節(jié)點間的水平縮進，單位為像素 | number | — | 16 |
| lazy | 是否懶加載子節(jié)點，需與 load 方法結(jié)合使用 | boolean | — | false |
| draggable | 是否開啟拖拽節(jié)點功能 | boolean | — | false |
| allow-drag | 判斷節(jié)點能否被拖拽 | Function(node) | — | — |
| allow-drop | 拖拽時判定位置能否被放置 | Function(draggingNode, dropNode) | — | — |
props
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| label | 指定節(jié)點標簽為節(jié)點對象的某個屬性值 | string, function(data, node) | — | — |
| children | 指定子樹為節(jié)點對象的某個屬性值 | string | — | — |
| disabled | 指定節(jié)點選擇框是否禁用為節(jié)點對象的某個屬性值 | boolean, function(data, node) | — | — |
| isLeaf | 指定節(jié)點是否為葉子節(jié)點，僅在指定了 lazy 屬性的情況下生效 | boolean, function(data, node) | — | — |
方法
Tree 內(nèi)部使用了 Node 類型的對象來包裝用戶傳入的數(shù)據(jù)，用來保存目前節(jié)點的狀態(tài)。 Tree 擁有如下方法：
| 方法名 | 說明 | 參數(shù) |
|---|---|---|
| filter | 對樹節(jié)點進行篩選操作 | 接收一個任意類型的參數(shù)，該參數(shù)會在 filter-node-method 中作為第一個參數(shù) |
| updateKeyChildren | 通過 keys 設(shè)置節(jié)點子元素，使用此方法必須設(shè)置 node-key 屬性 | (key, data) 接收兩個參數(shù)，1. 節(jié)點 key 2. 節(jié)點數(shù)據(jù)的數(shù)組 |
| getCheckedNodes | 若節(jié)點可被選擇（即 show-checkbox 為 true），則返回目前被選中的節(jié)點所組成的數(shù)組 | (leafOnly) 接收一個 boolean 類型的參數(shù)，若為 true 則僅返回被選中的葉子節(jié)點，默認值為 false |
| setCheckedNodes | 設(shè)置目前勾選的節(jié)點，使用此方法必須設(shè)置 node-key 屬性 | (nodes) 接收勾選節(jié)點數(shù)據(jù)的數(shù)組 |
| getCheckedKeys | 若節(jié)點可被選擇（即 show-checkbox 為 true），則返回目前被選中的節(jié)點的 key 所組成的數(shù)組 | (leafOnly) 接收一個 boolean 類型的參數(shù)，若為 true 則僅返回被選中的葉子節(jié)點的 keys，默認值為 false |
| setCheckedKeys | 通過 keys 設(shè)置目前勾選的節(jié)點，使用此方法必須設(shè)置 node-key 屬性 | (keys, leafOnly) 接收兩個參數(shù)，1. 勾選節(jié)點的 key 的數(shù)組 2. boolean 類型的參數(shù)，若為 true則僅設(shè)置葉子節(jié)點的選中狀態(tài)，默認值為 false |
| setChecked | 通過 key / data 設(shè)置某個節(jié)點的勾選狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 | (key/data, checked, deep) 接收三個參數(shù)，1. 勾選節(jié)點的 key 或者 data 2. boolean 類型，節(jié)點是否選中 3. boolean 類型，是否設(shè)置子節(jié)點 ，默認為 false |
| getHalfCheckedNodes | 若節(jié)點可被選擇（即 show-checkbox 為 true），則返回目前半選中的節(jié)點所組成的數(shù)組 | - |
| getHalfCheckedKeys | 若節(jié)點可被選擇（即 show-checkbox 為 true），則返回目前半選中的節(jié)點的 key 所組成的數(shù)組 | - |
| getCurrentKey | 獲取當前被選中節(jié)點的 key，使用此方法必須設(shè)置 node-key 屬性，若沒有節(jié)點被選中則返回 null | — |
| getCurrentNode | 獲取當前被選中節(jié)點的 node，若沒有節(jié)點被選中則返回 null | — |
| setCurrentKey | 通過 key 設(shè)置某個節(jié)點的當前選中狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 | (key) 待被選節(jié)點的 key |
| setCurrentNode | 通過 node 設(shè)置某個節(jié)點的當前選中狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 | (node) 待被選節(jié)點的 node |
| getNode | 根據(jù) data 或者 key 拿到 Tree 組件中的 node | (data) 要獲得 node 的 key 或者 data |
| remove | 刪除 Tree 中的一個節(jié)點 | (data) 要刪除的節(jié)點的 data、key 或者 node |
| append | 為 Tree 中的一個節(jié)點追加一個子節(jié)點 | (data, parentNode) 接收兩個參數(shù)，1. 要追加的子節(jié)點的 data 2. 子節(jié)點的 parent 的 data、key 或者 node |
| insertBefore | 為 Tree 的一個節(jié)點的前面增加一個節(jié)點 | (data, refNode) 接收兩個參數(shù)，1. 要增加的節(jié)點的 data 2. 要增加的節(jié)點的后一個節(jié)點的 data、key 或者 node |
| insertAfter | 為 Tree 的一個節(jié)點的后面增加一個節(jié)點 | (data, refNode) 接收兩個參數(shù)，1. 要增加的節(jié)點的 data 2. 要增加的節(jié)點的前一個節(jié)點的 data、key 或者 node |
Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| node-click | 節(jié)點被點擊時的回調(diào) | 共三個參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點對應(yīng)的 Node、節(jié)點組件本身。 |
| node-contextmenu | 當某一節(jié)點被鼠標右鍵點擊時會觸發(fā)該事件 | 共四個參數(shù)，依次為：event、傳遞給 data 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點對應(yīng)的 Node、節(jié)點組件本身。 |
| check-change | 節(jié)點選中狀態(tài)發(fā)生變化時的回調(diào) | 共三個參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點本身是否被選中、節(jié)點的子樹中是否有被選中的節(jié)點 |
| check | 當復選框被點擊的時候觸發(fā) | 共兩個參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、樹目前的選中狀態(tài)對象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四個屬性 |
| current-change | 當前選中節(jié)點變化時觸發(fā)的事件 | 共兩個參數(shù)，依次為：當前節(jié)點的數(shù)據(jù)，當前節(jié)點的 Node 對象 |
| node-expand | 節(jié)點被展開時觸發(fā)的事件 | 共三個參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點對應(yīng)的 Node、節(jié)點組件本身 |
| node-collapse | 節(jié)點被關(guān)閉時觸發(fā)的事件 | 共三個參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、節(jié)點對應(yīng)的 Node、節(jié)點組件本身 |
| node-drag-start | 節(jié)點開始拖拽時觸發(fā)的事件 | 共兩個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、event |
| node-drag-enter | 拖拽進入其他節(jié)點時觸發(fā)的事件 | 共三個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、所進入節(jié)點對應(yīng)的 Node、event |
| node-drag-leave | 拖拽離開某個節(jié)點時觸發(fā)的事件 | 共三個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、所離開節(jié)點對應(yīng)的 Node、event |
| node-drag-over | 在拖拽節(jié)點時觸發(fā)的事件（類似瀏覽器的 mouseover 事件） | 共三個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、當前進入節(jié)點對應(yīng)的 Node、event |
| node-drag-end | 拖拽結(jié)束時（可能未成功）觸發(fā)的事件 | 共四個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、結(jié)束拖拽時最后進入的節(jié)點（可能為空）、被拖拽節(jié)點的放置位置（before、after、inner）、event |
| node-drop | 拖拽成功完成時觸發(fā)的事件 | 共四個參數(shù)，依次為：被拖拽節(jié)點對應(yīng)的 Node、結(jié)束拖拽時最后進入的節(jié)點、被拖拽節(jié)點的放置位置（before、after、inner）、event |
Scoped Slot
| name | 說明 |
|---|---|
| — | 自定義樹節(jié)點的內(nèi)容，參數(shù)為 { node, data } |
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 defineExpose要在方法聲明定義以后使用的教程
這篇文章主要介紹了Vue3 defineExpose要在方法聲明定義以后使用的教程,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
Vue.js設(shè)計與實現(xiàn)無限遞歸學習總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計與實現(xiàn)無限遞歸學習總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
mpvue性能優(yōu)化實戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實戰(zhàn)技巧(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue3中關(guān)于ref和reactive的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了JavaScript優(yōu)選七個用于vue開發(fā)庫，借助開源庫加速Vue項目的開發(fā)進度是現(xiàn)代前端開發(fā)比較常見的方式，平常收集一些JavaScript庫介紹，在遇到需要的時候可以信手拈來2023-02-02
vue打包相關(guān)細節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細節(jié)整理(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
@vue/cli4升級@vue/cli5?node.js?polyfills錯誤的解決方式
最近在升級vue/cli的具有了一些問題,解決問題的過程也花費了些時間,所以下面這篇文章主要給大家介紹了關(guān)于@vue/cli4升級@vue/cli5?node.js?polyfills錯誤的解決方式,需要的朋友可以參考下2022-09-09
Vue?warn:Property?"state"?was?accessed?during
這篇文章主要為大家介紹了Vue?warn:Property?"state"?was?accessed?during?render的報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
解決@vue/cli安裝成功后,運行vue -V報:不是內(nèi)部或外部命令的問題
這篇文章主要介紹了解決@vue/cli安裝成功后,運行vue -V報:不是內(nèi)部或外部命令的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了實現(xiàn)vue圖片縮放方式-拖拽組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04