Skip to main content

树形

本文介绍如何使用树形（Tree）组件

该组件在企业版中支持使用

一、内容​

1、数据​

1.1 选项​

选项这里可以通过【数据源查询】、【Api 查询】动态将数据绑定到树形组件上，也支持绑定静态数据，
数据格式必须是具有 label、value 属性的对象数组，也支持添加 children 字段

  • 例如树形组件支持的数据格式为 JavaScript 对象数组
[
  {
    label: "川菜",
    value: "1",
    children: [
      {
        label: "麻辣烫",
        value: "1-1",
        children: [
          {
            label: "牛肉麻辣烫",
            value: "1-1-1",
          },
          {
            label: "鸭血麻辣烫",
            value: "1-1-2",
          },
        ],
      },
      {
        label: "火锅",
        value: "1-2",
        children: [
          {
            label: "麻辣火锅",
            value: "1-2-1",
          },
          {
            label: "清汤火锅",
            value: "1-2-2",
          },
        ],
      },
    ],
  },
  {
    label: "粤菜",
    value: "2",
    children: [
      {
        label: "烧腊",
        value: "2-1",
        children: [
          {
            label: "烧鸭",
            value: "2-1-1",
          },
          {
            label: "烧肉",
            value: "2-1-2",
          },
        ],
      },
      {
        label: "蒸菜",
        value: "2-2",
        children: [
          {
            label: "蒸鱼",
            value: "2-2-1",
          },
          {
            label: "蒸虾饺",
            value: "2-2-2",
          },
        ],
      },
    ],
  },
];

1.2 默认选中值​

可以设置树形组件默认选中的初始值，可以看下面的示例：

["2-2-2", "2-2-1"];

2、标签​

2.1 文本​

可以配置树形组件的文本标题，如果不需要显示文本，选项为空即可，可以看下面的示例子：

2.2 位置​

可以设置文本标题的位置，有三类选项可选择：自动、左、上

名称描述
自动文本标题根据组件本身的高度确定
左文本标题摆在组件的左侧
上文本标题摆在组件的顶部

3、属性​

3.1 是否显示​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

可以控制树形组件在页面上是否可见

3.2 禁用​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

可以控制树形组件是否可用

3.3 默认展开​

点击旁边的 JS 图标可以自行编写代码，通过 True/False 来控制是否开启该功能

开启该功能后，树形组件默认展开所有选项（包括所有的子选项）

4、事件​

4.1 onExpand​

点击旁边的 JS 图标可以自行编写代码

可以设置用户点击选项展开时触发的事件动作

4.2 onSelect​

点击旁边的 JS 图标可以自行编写代码

可以设置用户点击选项的文字时触发的事件动作

二、组件属性​

树形组件支持多种属性供用户灵活开发，后面将挑选几个常用属性进行描述

如需了解更多，可以在画布中拖入一个 text 文本组件，可以看下面的示例

{
  {
    Tree1;
  }
}

2.1 options​

该属性可以获取树形组件数组信息，可以看下面的示例：

{
  {
    Tree1.options;
  }
}
  • 如果想获取某个数组的信息，可以看下面的示例：

2.2 selectedOptionLabels​

该属性可以获取当前树形组件选择选项的 Label 属性，可以看下面的示例：

{
  {
    Tree1.selectedOptionLabels;
  }
}

2.3 selectedOptionValues​

该属性可以获取当前树形组件选择选项的 Value 属性，可以看下面的示例：

{
  {
    Tree1.selectedOptionValues;
  }
}

2.4 isDisabled​

该属性可以反应组件的可用状态，是 True 还是 False，可以看下面的示例：

{
  {
    Tree1.isDisabled;
  }
}

2.5 isVisible​

该属性可以反应组件的可见状态，是 True 还是 False，可以看下面的示例：

{
  {
    Tree1.isVisible;
  }
}

三、组件属性修改方法​

该方法支持在应用运行的过程中对组件属性的值进行修改，这些方法是异步的并返回 Promise。你可以使用.then()来确保 PagePlug 中后续代码行的执行和排序

3.1 setVisibility​

该方法可以设置 isVisible 属性的值

Tree1.setVisibility(false);

如果要执行顺序操作，请使用.then()，可以看下面的示例:
Tree1.setVisibility(false).then(() => {});

3.2 setOptions​

该方法可以设置 options 属性的值

{
  {
    Tree1.setOptions([
      {
        label: "川菜",
        value: "1",
      },
      {
        label: "粤菜",
        value: "2",
      },
    ]);
  }
}