一、簡介
Vueztree是一個基於Vue.js的樹形組件庫,它可以快速的為我們創建 tree 控件。控件在DOM中的數據結構是樹形結構。它支持自定義節點內容、渲染、數據綁定、異步加載以及其他高級功能。
二、安裝方法
Vueztree可以使用 yarn 和 npm 進行安裝。
使用 npm:
npm install vueztree -save
使用 yarn:
yarn add vueztree
三、基礎用法
以下是渲染一個簡單的靜態樹的代碼示例:
<template>
<div>
<ztree :data="treeData" />
</div>
</template>
<script>
import ztree from 'vueztree';
export default {
components: { ztree },
data () {
return {
treeData: [
{
name: '父節點 1',
children: [
{ name: '子節點 1' },
{ name: '子節點 2' }
]
},
{ name: '父節點 2' }
]
}
}
}
</script>
以上代碼渲染出的效果如下:
四、圖標設置
節點可以自定義設置圖標,以下是設置圖標的代碼示例:
<template>
<div>
<ztree
:data="treeData"
:setting="{
view: {
fontCss: { color: 'red' },
addDiyDom: function (treeId, node) {
if (node.level === 2) {
var aObj = node.aObj;
var editStr =
'<span class="button edit" id="' +
node.tId +
'_edit" title="edit"></span>';
aObj.after(editStr);
var btn = $(node, treeId).find('span.edit');
if (btn)
btn.bind('click', function () {
alert('edit button click for ' + node.name);
});
}
}
},
edit: {
enable: true
}
}"
/>
</div>
</template>
<script>
import ztree from 'vueztree';
export default {
components: { ztree },
data () {
return {
treeData: [
{
name: '父節點 1',
icon: '/img/1.png',
children: [
{ name: '子節點 1', icon: '/img/2.png' },
{ name: '子節點 2', icon: '/img/3.png' },
{ name: '子節點 3', icon: '/img/4.png' }
]
},
{ name: '父節點 2', icon: '/img/5.png' }
]
}
}
}
</script>
以上代碼渲染出的效果如下:
五、異步加載
Vueztree 支持異步加載節點數據,以下是使用異步加載的代碼示例:
<template>
<div>
<ztree
:data="treeData"
:async="{
enable: true,
url: '/getNodes',
autoParam: ['id'],
dataFilter: function (treeId, parentNode, responseData) {
return responseData.nodes;
}
}"
/>
</div>
</template>
<script>
import ztree from 'vueztree';
export default {
components: { ztree },
data () {
return {
treeData: [
{
name: '父節點 1',
id: 1,
isParent: true
},
{
name: '父節點 2',
id: 2,
isParent: true
}
]
}
}
}
</script>
以上代碼渲染出的效果如下:
六、過濾器
通過 Vueztree 內置的兩個過濾器,用戶可以輕鬆的過濾樹上的節點,以下是使用過濾器的代碼示例:
<template>
<div>
<input v-model="keyword" placeholder="輸入關鍵詞進行過濾" />
<ztree
:data="treeData"
:filter="{
type: 'fun',
filter:function (node) {
return node.name.indexOf(keyword) !== -1;
}
}"
/>
</div>
</template>
<script>
import ztree from 'vueztree';
export default {
components: { ztree },
data () {
return {
keyword: '',
treeData: [
{
name: '父節點 1',
children: [
{ name: '子節點 1' },
{ name: '子節點 2' }
]
},
{ name: '父節點 2' }
]
}
}
}
</script>
以上代碼渲染出的效果如下:
七、複選框
Vueztree 內置了複選框,以下是使用複選框的代碼示例:
<template>
<div>
<ztree
:data="treeData"
:checkable="true"
@on-check-change="onCheckChange"
/>
</div>
</template>
<script>
import ztree from 'vueztree';
export default {
components: { ztree },
data () {
return {
treeData: [
{
name: '父節點 1',
id: 1,
children: [
{ name: '子節點 1', id: 2 },
{ name: '子節點 2', id: 3 }
]
},
{ name: '父節點 2', id: 4 }
]
}
},
methods: {
onCheckChange (checkedNodes) {
console.log(checkedNodes.map((node) => node.name));
}
}
}
</script>
以上代碼渲染出的效果如下:
八、拖動
Vueztree 還支持節點拖動,可以實現節點拖動到同一父節點下或不同父節點下,以下是使用拖動的代碼示例:
<template>
<div>
<ztree
:data="treeData"
:droppable="true"
@on-drag-move="onDragMove"
@on-drop="onDrop"
:setting="{
edit: {
drag: {
inner: true,
isCopy: true
},
enable: true
}
}"
/>
</div>
</template>
<script>
import ztree from 'vueztree';
export default {
components: { ztree },
data () {
return {
treeData: [
{
name: '父節點 1',
id: 1,
children: [
{ name: '子節點 1', id: 2 },
{ name: '子節點 2', id: 3 }
]
},
{ name: '父節點 2', id: 4 }
]
};
},
methods: {
onDragMove ({ event, treeId, treeNodes }) {
console.log('drag move event', event);
console.log('drag move treeId', treeId);
console.log('drag move nodes', treeNodes);
},
onDrop ({ event, treeId, targetNode, moveType, treeNodes }) {
console.log('drop event', event);
console.log('drop treeId', treeId);
console.log('drop nodes', treeNodes);
console.log('drop target node', targetNode);
console.log('drop moveType', moveType);
console.log('new parent', targetNode.getParentNode());
}
}
}
</script>
以上代碼渲染出的效果如下:
原創文章,作者:DNXAI,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/334317.html