forked from fanruan/fineui-custom-tutorials
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.1 KiB
127 lines
3.1 KiB
4 years ago
|
# custom_tree基本结构
|
||
|
|
|
||
|
|
## custom_tree props
|
||
|
|
```
|
||
|
|
{
|
||
|
|
expander: {
|
||
|
|
el: {},
|
||
|
|
popup: {
|
||
|
|
type: "bi.custom_tree"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
items: [],
|
||
|
|
itemsCreator: BI.emptyFn,
|
||
|
|
el: {
|
||
|
|
type: "bi.button_tree",
|
||
|
|
chooseType: 0,
|
||
|
|
layouts: [{
|
||
|
|
type: "bi.vertical"
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### expander
|
||
|
|
expander在custom_tree中的作用是用来控制展开收起行为.参考上一节expander的props定义,custom_tree的props属性中expander字段用来控制expander.
|
||
|
|
|
||
|
|
### el
|
||
|
|
el对应的是expander中popup属性对应的el字段,用来控制树展开之后的内容是什么
|
||
|
|
|
||
|
|
### items和itemsCreator
|
||
|
|
custom_tree实际上就是抽象的把items构建出一份树结构
|
||
|
|
```
|
||
|
|
[
|
||
|
|
{
|
||
|
|
type: "bi.select_tree_expander",
|
||
|
|
el: {
|
||
|
|
id: "1",
|
||
|
|
type: "bi.test_node",
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
type: "bi.custom_tree",
|
||
|
|
expander: {
|
||
|
|
type: "bi.select_tree_expander",
|
||
|
|
isDefaultInit: false,
|
||
|
|
el: {},
|
||
|
|
popup: {
|
||
|
|
type: "bi.custom_tree",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
id: "1-1",
|
||
|
|
type: "bi.test_item",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
el: {
|
||
|
|
type: "bi.loader",
|
||
|
|
next: false,
|
||
|
|
el: {
|
||
|
|
type: "bi.button_tree",
|
||
|
|
chooseType: 1,
|
||
|
|
layouts: [
|
||
|
|
{
|
||
|
|
type: "bi.vertical",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
isDefaultInit: false,
|
||
|
|
id: "1",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
id: "1-1",
|
||
|
|
type: "bi.test_item",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "bi.select_tree_expander",
|
||
|
|
el: {
|
||
|
|
id: "2",
|
||
|
|
type: "bi.test_node",
|
||
|
|
},
|
||
|
|
popup: {
|
||
|
|
type: "bi.custom_tree",
|
||
|
|
expander: {
|
||
|
|
type: "bi.select_tree_expander",
|
||
|
|
isDefaultInit: false,
|
||
|
|
el: {},
|
||
|
|
popup: {
|
||
|
|
type: "bi.custom_tree",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
id: "2-1",
|
||
|
|
type: "bi.test_item",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
el: {
|
||
|
|
type: "bi.loader",
|
||
|
|
next: false,
|
||
|
|
el: {
|
||
|
|
type: "bi.button_tree",
|
||
|
|
chooseType: 1,
|
||
|
|
layouts: [
|
||
|
|
{
|
||
|
|
type: "bi.vertical",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
isDefaultInit: false,
|
||
|
|
id: "2",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
id: "2-1",
|
||
|
|
type: "bi.test_item",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
```
|
||
|
|
|
||
|
|
看上边格式化出的数据结构.最外层为两个`bi.select_tree_expander`,el是我们指定的父级节点,他的popup是另一层custom_tree嵌套,最终渲染出来的是`bi.loader`
|