elementUI Tree 樹(shù)形控件的官方使用文檔
更新時(shí)間：2019年04月25日 09:30:26 作者：楊楊得懿
這篇文章主要介紹了elementUI Tree 樹(shù)形控件的官方使用文檔，用清晰的層級(jí)結(jié)構(gòu)展示信息，可展開(kāi)或折疊。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
Tree 樹(shù)形控件---官方文檔地址
用清晰的層級(jí)結(jié)構(gòu)展示信息，可展開(kāi)或折疊。
基礎(chǔ)用法
基礎(chǔ)的樹(shù)形結(jié)構(gòu)展示。
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
export default {
data() {
return {
data: [{
label: '一級(jí) 1',
children: [{
label: '二級(jí) 1-1',
children: [{
label: '三級(jí) 1-1-1'
}]
}]
}, {
label: '一級(jí) 2',
children: [{
label: '二級(jí) 2-1',
children: [{
label: '三級(jí) 2-1-1'
}]
}, {
label: '二級(jí) 2-2',
children: [{
label: '三級(jí) 2-2-1'
}]
}]
}, {
label: '一級(jí) 3',
children: [{
label: '二級(jí) 3-1',
children: [{
label: '三級(jí) 3-1-1'
}]
}, {
label: '二級(jí) 3-2',
children: [{
label: '三級(jí) 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
可選擇
適用于需要選擇層級(jí)時(shí)使用。本例還展示了動(dòng)態(tài)加載節(jié)點(diǎn)數(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é)點(diǎn)
由于在點(diǎn)擊節(jié)點(diǎn)時(shí)才進(jìn)行該層數(shù)據(jù)的獲取，默認(rèn)情況下 Tree 無(wú)法預(yù)知某個(gè)節(jié)點(diǎn)是否為葉子節(jié)點(diǎn)，所以會(huì)為每個(gè)節(jié)點(diǎn)添加一個(gè)下拉按鈕，如果節(jié)點(diǎn)沒(méi)有下層數(shù)據(jù)，則點(diǎn)擊后下拉按鈕會(huì)消失。同時(shí)，你也可以提前告知 Tree 某個(gè)節(jié)點(diǎn)是否為葉子節(jié)點(diǎn)，從而避免在葉子節(jié)點(diǎn)前渲染下拉按鈕。
<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>
默認(rèn)展開(kāi)和默認(rèn)選中
可將 Tree 的某些節(jié)點(diǎn)設(shè)置為默認(rèn)展開(kāi)或默認(rèn)選中
分別通過(guò)default-expanded-keys和default-checked-keys設(shè)置默認(rèn)展開(kāi)和默認(rèn)選中的節(jié)點(diǎn)。需要注意的是，此時(shí)必須設(shè)置node-key，其值為節(jié)點(diǎn)數(shù)據(jù)中的一個(gè)字段名，該字段在整棵樹(shù)中是唯一的。
<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: '一級(jí) 1',
children: [{
id: 4,
label: '二級(jí) 1-1',
children: [{
id: 9,
label: '三級(jí) 1-1-1'
}, {
id: 10,
label: '三級(jí) 1-1-2'
}]
}]
}, {
id: 2,
label: '一級(jí) 2',
children: [{
id: 5,
label: '二級(jí) 2-1'
}, {
id: 6,
label: '二級(jí) 2-2'
}]
}, {
id: 3,
label: '一級(jí) 3',
children: [{
id: 7,
label: '二級(jí) 3-1'
}, {
id: 8,
label: '二級(jí) 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
禁用狀態(tài)
可將 Tree 的某些節(jié)點(diǎn)設(shè)置為禁用狀態(tài)
通過(guò)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: '一級(jí) 2',
children: [{
id: 3,
label: '二級(jí) 2-1',
children: [{
id: 4,
label: '三級(jí) 3-1-1'
}, {
id: 5,
label: '三級(jí) 3-1-2',
disabled: true
}]
}, {
id: 2,
label: '二級(jí) 2-2',
disabled: true,
children: [{
id: 6,
label: '三級(jí) 3-2-1'
}, {
id: 7,
label: '三級(jí) 3-2-2',
disabled: true
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
樹(shù)節(jié)點(diǎn)的選擇
本例展示如何獲取和設(shè)置選中節(jié)點(diǎn)。獲取和設(shè)置各有兩種方式：通過(guò) node 或通過(guò) key。如果需要通過(guò) key 來(lái)獲取或設(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">通過(guò) node 獲取</el-button>
<el-button @click="getCheckedKeys">通過(guò) key 獲取</el-button>
<el-button @click="setCheckedNodes">通過(guò) node 設(shè)置</el-button>
<el-button @click="setCheckedKeys">通過(guò) 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: '二級(jí) 2-1'
}, {
id: 9,
label: '三級(jí) 1-1-1'
}]);
},
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
data() {
return {
data2: [{
id: 1,
label: '一級(jí) 1',
children: [{
id: 4,
label: '二級(jí) 1-1',
children: [{
id: 9,
label: '三級(jí) 1-1-1'
}, {
id: 10,
label: '三級(jí) 1-1-2'
}]
}]
}, {
id: 2,
label: '一級(jí) 2',
children: [{
id: 5,
label: '二級(jí) 2-1'
}, {
id: 6,
label: '二級(jí) 2-2'
}]
}, {
id: 3,
label: '一級(jí) 3',
children: [{
id: 7,
label: '二級(jí) 3-1'
}, {
id: 8,
label: '二級(jí) 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
自定義節(jié)點(diǎn)內(nèi)容
節(jié)點(diǎn)的內(nèi)容支持自定義，可以在節(jié)點(diǎn)區(qū)添加按鈕或圖標(biāo)等內(nèi)容
可以通過(guò)兩種方法進(jìn)行樹(shù)節(jié)點(diǎn)內(nèi)容的自定義：render-content和 scoped slot。使用render-content指定渲染函數(shù)，該函數(shù)返回需要的節(jié)點(diǎn)區(qū)內(nèi)容即可。渲染函數(shù)的用法請(qǐng)參考 Vue 文檔。使用 scoped slot 會(huì)傳入兩個(gè)參數(shù)node和data，分別表示當(dāng)前節(jié)點(diǎn)的 Node 對(duì)象和當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)。注意：由于 jsfiddle 不支持 JSX 語(yǔ)法，所以render-content示例在 jsfiddle 中無(wú)法運(yùn)行。但是在實(shí)際的項(xiàng)目中，只要正確地配置了相關(guān)依賴，就可以正常運(yù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: '一級(jí) 1',
children: [{
id: 4,
label: '二級(jí) 1-1',
children: [{
id: 9,
label: '三級(jí) 1-1-1'
}, {
id: 10,
label: '三級(jí) 1-1-2'
}]
}]
}, {
id: 2,
label: '一級(jí) 2',
children: [{
id: 5,
label: '二級(jí) 2-1'
}, {
id: 6,
label: '二級(jí) 2-2'
}]
}, {
id: 3,
label: '一級(jí) 3',
children: [{
id: 7,
label: '二級(jí) 3-1'
}, {
id: 8,
label: '二級(jí) 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é)點(diǎn)過(guò)濾
通過(guò)關(guān)鍵字過(guò)濾樹(shù)節(jié)點(diǎn)
在需要對(duì)節(jié)點(diǎn)進(jìn)行過(guò)濾時(shí)，調(diào)用 Tree 實(shí)例的filter方法，參數(shù)為關(guān)鍵字。需要注意的是，此時(shí)需要設(shè)置filter-node-method，值為過(guò)濾函數(shù)。
<el-input
placeholder="輸入關(guān)鍵字進(jìn)行過(guò)濾"
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: '一級(jí) 1',
children: [{
id: 4,
label: '二級(jí) 1-1',
children: [{
id: 9,
label: '三級(jí) 1-1-1'
}, {
id: 10,
label: '三級(jí) 1-1-2'
}]
}]
}, {
id: 2,
label: '一級(jí) 2',
children: [{
id: 5,
label: '二級(jí) 2-1'
}, {
id: 6,
label: '二級(jí) 2-2'
}]
}, {
id: 3,
label: '一級(jí) 3',
children: [{
id: 7,
label: '二級(jí) 3-1'
}, {
id: 8,
label: '二級(jí) 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
手風(fēng)琴模式
對(duì)于同一級(jí)的節(jié)點(diǎn)，每次只能展開(kāi)一個(gè)
<el-tree
:data="data"
:props="defaultProps"
accordion
@node-click="handleNodeClick">
</el-tree>
<script>
export default {
data() {
return {
data: [{
label: '一級(jí) 1',
children: [{
label: '二級(jí) 1-1',
children: [{
label: '三級(jí) 1-1-1'
}]
}]
}, {
label: '一級(jí) 2',
children: [{
label: '二級(jí) 2-1',
children: [{
label: '三級(jí) 2-1-1'
}]
}, {
label: '二級(jí) 2-2',
children: [{
label: '三級(jí) 2-2-1'
}]
}]
}, {
label: '一級(jí) 3',
children: [{
label: '二級(jí) 3-1',
children: [{
label: '三級(jí) 3-1-1'
}]
}, {
label: '二級(jí) 3-2',
children: [{
label: '三級(jí) 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
可拖拽節(jié)點(diǎn)
通過(guò) draggable 屬性可讓節(jié)點(diǎn)變?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: '一級(jí) 1',
children: [{
id: 4,
label: '二級(jí) 1-1',
children: [{
id: 9,
label: '三級(jí) 1-1-1'
}, {
id: 10,
label: '三級(jí) 1-1-2'
}]
}]
}, {
id: 2,
label: '一級(jí) 2',
children: [{
id: 5,
label: '二級(jí) 2-1'
}, {
id: 6,
label: '二級(jí) 2-2'
}]
}, {
id: 3,
label: '一級(jí) 3',
children: [{
id: 7,
label: '二級(jí) 3-1'
}, {
id: 8,
label: '二級(jí) 3-2',
children: [{
id: 11,
label: '三級(jí) 3-2-1'
}, {
id: 12,
label: '三級(jí) 3-2-2'
}, {
id: 13,
label: '三級(jí) 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 !== '二級(jí) 3-1';
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('三級(jí) 3-1-1') === -1;
}
}
};
</script>
Attributes
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| data | 展示數(shù)據(jù) | array | — | — |
| empty-text | 內(nèi)容為空的時(shí)候展示的文本 | String | — | — |
| node-key | 每個(gè)樹(shù)節(jié)點(diǎn)用來(lái)作為唯一標(biāo)識(shí)的屬性，整棵樹(shù)應(yīng)該是唯一的 | String | — | — |
| props | 配置選項(xiàng)，具體看下表 | object | — | — |
| render-after-expand | 是否在第一次展開(kāi)某個(gè)樹(shù)節(jié)點(diǎn)后才渲染其子節(jié)點(diǎn) | boolean | — | true |
| load | 加載子樹(shù)數(shù)據(jù)的方法，僅當(dāng) lazy 屬性為true 時(shí)生效 | function(node, resolve) | — | — |
| render-content | 樹(shù)節(jié)點(diǎn)的內(nèi)容區(qū)的渲染 Function | Function(h, { node, data, store } | — | — |
| highlight-current | 是否高亮當(dāng)前選中節(jié)點(diǎn)，默認(rèn)值是 false。 | boolean | — | false |
| default-expand-all | 是否默認(rèn)展開(kāi)所有節(jié)點(diǎn) | boolean | — | false |
| expand-on-click-node | 是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候展開(kāi)或者收縮節(jié)點(diǎn)， 默認(rèn)值為 true，如果為 false，則只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會(huì)展開(kāi)或者收縮節(jié)點(diǎn)。 | boolean | — | true |
| auto-expand-parent | 展開(kāi)子節(jié)點(diǎn)的時(shí)候是否自動(dòng)展開(kāi)父節(jié)點(diǎn) | boolean | — | true |
| default-expanded-keys | 默認(rèn)展開(kāi)的節(jié)點(diǎn)的 key 的數(shù)組 | array | — | — |
| show-checkbox | 節(jié)點(diǎn)是否可被選擇 | boolean | — | false |
| check-strictly | 在顯示復(fù)選框的情況下，是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法，默認(rèn)為 false | boolean | — | false |
| default-checked-keys | 默認(rèn)勾選的節(jié)點(diǎn)的 key 的數(shù)組 | array | — | — |
| filter-node-method | 對(duì)樹(shù)節(jié)點(diǎn)進(jìn)行篩選時(shí)執(zhí)行的方法，返回 true 表示這個(gè)節(jié)點(diǎn)可以顯示，返回 false 則表示這個(gè)節(jié)點(diǎn)會(huì)被隱藏 | Function(value, data, node) | — | — |
| accordion | 是否每次只打開(kāi)一個(gè)同級(jí)樹(shù)節(jié)點(diǎn)展開(kāi) | boolean | — | false |
| indent | 相鄰級(jí)節(jié)點(diǎn)間的水平縮進(jìn)，單位為像素 | number | — | 16 |
| lazy | 是否懶加載子節(jié)點(diǎn)，需與 load 方法結(jié)合使用 | boolean | — | false |
| draggable | 是否開(kāi)啟拖拽節(jié)點(diǎn)功能 | boolean | — | false |
| allow-drag | 判斷節(jié)點(diǎn)能否被拖拽 | Function(node) | — | — |
| allow-drop | 拖拽時(shí)判定位置能否被放置 | Function(draggingNode, dropNode) | — | — |
props
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| label | 指定節(jié)點(diǎn)標(biāo)簽為節(jié)點(diǎn)對(duì)象的某個(gè)屬性值 | string, function(data, node) | — | — |
| children | 指定子樹(shù)為節(jié)點(diǎn)對(duì)象的某個(gè)屬性值 | string | — | — |
| disabled | 指定節(jié)點(diǎn)選擇框是否禁用為節(jié)點(diǎn)對(duì)象的某個(gè)屬性值 | boolean, function(data, node) | — | — |
| isLeaf | 指定節(jié)點(diǎn)是否為葉子節(jié)點(diǎn)，僅在指定了 lazy 屬性的情況下生效 | boolean, function(data, node) | — | — |
方法
Tree 內(nèi)部使用了 Node 類型的對(duì)象來(lái)包裝用戶傳入的數(shù)據(jù)，用來(lái)保存目前節(jié)點(diǎn)的狀態(tài)。 Tree 擁有如下方法：
| 方法名 | 說(shuō)明 | 參數(shù) |
|---|---|---|
| filter | 對(duì)樹(shù)節(jié)點(diǎn)進(jìn)行篩選操作 | 接收一個(gè)任意類型的參數(shù)，該參數(shù)會(huì)在 filter-node-method 中作為第一個(gè)參數(shù) |
| updateKeyChildren | 通過(guò) keys 設(shè)置節(jié)點(diǎn)子元素，使用此方法必須設(shè)置 node-key 屬性 | (key, data) 接收兩個(gè)參數(shù)，1. 節(jié)點(diǎn) key 2. 節(jié)點(diǎn)數(shù)據(jù)的數(shù)組 |
| getCheckedNodes | 若節(jié)點(diǎn)可被選擇（即 show-checkbox 為 true），則返回目前被選中的節(jié)點(diǎn)所組成的數(shù)組 | (leafOnly) 接收一個(gè) boolean 類型的參數(shù)，若為 true 則僅返回被選中的葉子節(jié)點(diǎn)，默認(rèn)值為 false |
| setCheckedNodes | 設(shè)置目前勾選的節(jié)點(diǎn)，使用此方法必須設(shè)置 node-key 屬性 | (nodes) 接收勾選節(jié)點(diǎn)數(shù)據(jù)的數(shù)組 |
| getCheckedKeys | 若節(jié)點(diǎn)可被選擇（即 show-checkbox 為 true），則返回目前被選中的節(jié)點(diǎn)的 key 所組成的數(shù)組 | (leafOnly) 接收一個(gè) boolean 類型的參數(shù)，若為 true 則僅返回被選中的葉子節(jié)點(diǎn)的 keys，默認(rèn)值為 false |
| setCheckedKeys | 通過(guò) keys 設(shè)置目前勾選的節(jié)點(diǎn)，使用此方法必須設(shè)置 node-key 屬性 | (keys, leafOnly) 接收兩個(gè)參數(shù)，1. 勾選節(jié)點(diǎn)的 key 的數(shù)組 2. boolean 類型的參數(shù)，若為 true則僅設(shè)置葉子節(jié)點(diǎn)的選中狀態(tài)，默認(rèn)值為 false |
| setChecked | 通過(guò) key / data 設(shè)置某個(gè)節(jié)點(diǎn)的勾選狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 | (key/data, checked, deep) 接收三個(gè)參數(shù)，1. 勾選節(jié)點(diǎn)的 key 或者 data 2. boolean 類型，節(jié)點(diǎn)是否選中 3. boolean 類型，是否設(shè)置子節(jié)點(diǎn) ，默認(rèn)為 false |
| getHalfCheckedNodes | 若節(jié)點(diǎn)可被選擇（即 show-checkbox 為 true），則返回目前半選中的節(jié)點(diǎn)所組成的數(shù)組 | - |
| getHalfCheckedKeys | 若節(jié)點(diǎn)可被選擇（即 show-checkbox 為 true），則返回目前半選中的節(jié)點(diǎn)的 key 所組成的數(shù)組 | - |
| getCurrentKey | 獲取當(dāng)前被選中節(jié)點(diǎn)的 key，使用此方法必須設(shè)置 node-key 屬性，若沒(méi)有節(jié)點(diǎn)被選中則返回 null | — |
| getCurrentNode | 獲取當(dāng)前被選中節(jié)點(diǎn)的 node，若沒(méi)有節(jié)點(diǎn)被選中則返回 null | — |
| setCurrentKey | 通過(guò) key 設(shè)置某個(gè)節(jié)點(diǎn)的當(dāng)前選中狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 | (key) 待被選節(jié)點(diǎn)的 key |
| setCurrentNode | 通過(guò) node 設(shè)置某個(gè)節(jié)點(diǎn)的當(dāng)前選中狀態(tài)，使用此方法必須設(shè)置 node-key 屬性 | (node) 待被選節(jié)點(diǎn)的 node |
| getNode | 根據(jù) data 或者 key 拿到 Tree 組件中的 node | (data) 要獲得 node 的 key 或者 data |
| remove | 刪除 Tree 中的一個(gè)節(jié)點(diǎn) | (data) 要?jiǎng)h除的節(jié)點(diǎn)的 data、key 或者 node |
| append | 為 Tree 中的一個(gè)節(jié)點(diǎn)追加一個(gè)子節(jié)點(diǎn) | (data, parentNode) 接收兩個(gè)參數(shù)，1. 要追加的子節(jié)點(diǎn)的 data 2. 子節(jié)點(diǎn)的 parent 的 data、key 或者 node |
| insertBefore | 為 Tree 的一個(gè)節(jié)點(diǎn)的前面增加一個(gè)節(jié)點(diǎn) | (data, refNode) 接收兩個(gè)參數(shù)，1. 要增加的節(jié)點(diǎn)的 data 2. 要增加的節(jié)點(diǎn)的后一個(gè)節(jié)點(diǎn)的 data、key 或者 node |
| insertAfter | 為 Tree 的一個(gè)節(jié)點(diǎn)的后面增加一個(gè)節(jié)點(diǎn) | (data, refNode) 接收兩個(gè)參數(shù)，1. 要增加的節(jié)點(diǎn)的 data 2. 要增加的節(jié)點(diǎn)的前一個(gè)節(jié)點(diǎn)的 data、key 或者 node |
Events
| 事件名稱 | 說(shuō)明 | 回調(diào)參數(shù) |
|---|---|---|
| node-click | 節(jié)點(diǎn)被點(diǎn)擊時(shí)的回調(diào) | 共三個(gè)參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)對(duì)應(yīng)的 Node、節(jié)點(diǎn)組件本身。 |
| node-contextmenu | 當(dāng)某一節(jié)點(diǎn)被鼠標(biāo)右鍵點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 | 共四個(gè)參數(shù)，依次為：event、傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)對(duì)應(yīng)的 Node、節(jié)點(diǎn)組件本身。 |
| check-change | 節(jié)點(diǎn)選中狀態(tài)發(fā)生變化時(shí)的回調(diào) | 共三個(gè)參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)本身是否被選中、節(jié)點(diǎn)的子樹(shù)中是否有被選中的節(jié)點(diǎn) |
| check | 當(dāng)復(fù)選框被點(diǎn)擊的時(shí)候觸發(fā) | 共兩個(gè)參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、樹(shù)目前的選中狀態(tài)對(duì)象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四個(gè)屬性 |
| current-change | 當(dāng)前選中節(jié)點(diǎn)變化時(shí)觸發(fā)的事件 | 共兩個(gè)參數(shù)，依次為：當(dāng)前節(jié)點(diǎn)的數(shù)據(jù)，當(dāng)前節(jié)點(diǎn)的 Node 對(duì)象 |
| node-expand | 節(jié)點(diǎn)被展開(kāi)時(shí)觸發(fā)的事件 | 共三個(gè)參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)對(duì)應(yīng)的 Node、節(jié)點(diǎn)組件本身 |
| node-collapse | 節(jié)點(diǎn)被關(guān)閉時(shí)觸發(fā)的事件 | 共三個(gè)參數(shù)，依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點(diǎn)所對(duì)應(yīng)的對(duì)象、節(jié)點(diǎn)對(duì)應(yīng)的 Node、節(jié)點(diǎn)組件本身 |
| node-drag-start | 節(jié)點(diǎn)開(kāi)始拖拽時(shí)觸發(fā)的事件 | 共兩個(gè)參數(shù)，依次為：被拖拽節(jié)點(diǎn)對(duì)應(yīng)的 Node、event |
| node-drag-enter | 拖拽進(jìn)入其他節(jié)點(diǎn)時(shí)觸發(fā)的事件 | 共三個(gè)參數(shù)，依次為：被拖拽節(jié)點(diǎn)對(duì)應(yīng)的 Node、所進(jìn)入節(jié)點(diǎn)對(duì)應(yīng)的 Node、event |
| node-drag-leave | 拖拽離開(kāi)某個(gè)節(jié)點(diǎn)時(shí)觸發(fā)的事件 | 共三個(gè)參數(shù)，依次為：被拖拽節(jié)點(diǎn)對(duì)應(yīng)的 Node、所離開(kāi)節(jié)點(diǎn)對(duì)應(yīng)的 Node、event |
| node-drag-over | 在拖拽節(jié)點(diǎn)時(shí)觸發(fā)的事件（類似瀏覽器的 mouseover 事件） | 共三個(gè)參數(shù)，依次為：被拖拽節(jié)點(diǎn)對(duì)應(yīng)的 Node、當(dāng)前進(jìn)入節(jié)點(diǎn)對(duì)應(yīng)的 Node、event |
| node-drag-end | 拖拽結(jié)束時(shí)（可能未成功）觸發(fā)的事件 | 共四個(gè)參數(shù)，依次為：被拖拽節(jié)點(diǎn)對(duì)應(yīng)的 Node、結(jié)束拖拽時(shí)最后進(jìn)入的節(jié)點(diǎn)（可能為空）、被拖拽節(jié)點(diǎn)的放置位置（before、after、inner）、event |
| node-drop | 拖拽成功完成時(shí)觸發(fā)的事件 | 共四個(gè)參數(shù)，依次為：被拖拽節(jié)點(diǎn)對(duì)應(yīng)的 Node、結(jié)束拖拽時(shí)最后進(jìn)入的節(jié)點(diǎn)、被拖拽節(jié)點(diǎn)的放置位置（before、after、inner）、event |
Scoped Slot
| name | 說(shuō)明 |
|---|---|
| — | 自定義樹(shù)節(jié)點(diǎn)的內(nèi)容，參數(shù)為 { node, data } |
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue+echarts封裝氣泡圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要給大家分享了 v-bind的使用和注意需要注意的點(diǎn)，下面文章圍繞 v-bind指令的相關(guān)資料展開(kāi)內(nèi)容且附上詳細(xì)代碼 需要的小伙伴可以參考一下，希望對(duì)大家有所幫助2022-10-10
這篇文章主要介紹了詳解vue掛載到dom上會(huì)發(fā)生什么，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue mixins組件復(fù)用的幾種方式（小結(jié)）
這篇文章主要介紹了vue mixins組件復(fù)用的幾種方式（小結(jié)）,vue中提供了一種混合機(jī)制mixins，用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,有興趣的可以了解一下2017-09-09
這篇文章主要為大家介紹了Vue之插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助，希望能夠給你帶來(lái)幫助2021-11-11
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過(guò)程,也就是new Vue()開(kāi)始就是vue生命周期的開(kāi)始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過(guò)程,稱這是Vue的?命周期2022-10-10
vue中提供了一種混合機(jī)制--mixins，用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用。下面給大家談?wù)勎覍?duì)vue中mixin的一點(diǎn)理解，需要的朋友參考下吧2017-12-12
Vue3+Element?Plus的項(xiàng)目搭建過(guò)程詳解
這篇文章主要為大家介紹了Vue3+Element?Plus的項(xiàng)目搭建過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue + typescript + 極驗(yàn)登錄驗(yàn)證的實(shí)現(xiàn)方法
這篇文章主要介紹了vue + typescript + 極驗(yàn) 登錄驗(yàn)證的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue3+vite使用環(huán)境變量.env的一些配置情況詳細(xì)說(shuō)明
開(kāi)發(fā)中經(jīng)常會(huì)使用環(huán)境變量,Vite相比于Webpack也有一定的變化,下面這篇文章主要給大家介紹了關(guān)于vue3+vite使用環(huán)境變量.env的一些配置情況說(shuō)明的相關(guān)資料,需要的朋友可以參考下2022-12-12