Webzen-uitree
使用方式
html
<!-- 引入 -->
<script type="module" src="https://cdn.jsdelivr.net/npm/webzen-ui/src/component/wz-tree/index.js">
<!-- 使用 -->
<wz-tree></wz-tree>
const treeDatas = [
{
title: '标题-1',
expand: true,
key: "标题-1",
selected: true,
children:[
{
title: '标题-3',
expand: true,
key: "标题-3",
selected: true,
},
]
},
{
title: '标题-2',
key: "标题-2",
expand: true,
}
]
function serialize(obj) {
return JSON.stringify(obj, function (key, value) {
if (typeof value === 'function') {
return value.toString();
}
return value;
});
}
let config = {
data: treeDatas,
multiple: false,
toggle: (node) => { },
select: (node, nodes) => { console.log("选中数据:", nodes) }
}
document.querySelector(".init").setAttribute("config", serialize(config))是否多选 multiple
js
let config = {
multiple: false,
...
}初始化是否被展开 expand
js
const treeDatas = [
{
expand: false,
...
},
...
]初始是否被选择 selected
注意单选模式下初始没有任何会被选择
动态加载子节点
js
let asyncData = [
{
title: '标题-9',
key: '标题-9',
selected: false,
expand: false,
parent: '标题-2',
children: [
{
title: '标题-10',
key: '标题-10',
selected: false,
expand: true,
parent: '标题-9',
},
],
},
{
title: '标题-12',
key: '标题-12',
selected: false,
expand: true,
children: [
{
title: '标题-13',
key: '标题-13',
selected: false,
expand: true,
},
],
},
];
document
.querySelector('.async')
.setAttribute('config', serialize(configexpand));
let temp = document.querySelector('.async').ClassInstance;
setTimeout(() => {
temp.asyncData('标题-2', asyncData);
}, 1000);搜索树
js
let asyncData = [
{
title: '标题-9',
key: '标题-9',
selected: false,
expand: false,
parent: '标题-2',
children: [
{
title: '标题-10',
key: '标题-10',
selected: false,
expand: true,
parent: '标题-9',
},
],
},
{
title: '标题-12',
key: '标题-12',
selected: false,
expand: true,
children: [
{
title: '标题-13',
key: '标题-13',
selected: false,
expand: true,
},
],
},
];
document
.querySelector('.async')
.setAttribute('config', serialize(configexpand));
let temp = document.querySelector('.async').ClassInstance;
setTimeout(() => {
temp.asyncData('标题-5', asyncData);
}, 1000);