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.
3.1 KiB
3.1 KiB
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