跳到主要内容

分类选择 TreeSelect

多组数据选择,内置侧边栏组件

用法示例

基础用法

<ti-tree-select id="ti-tree-select"></ti-tree-select>

自定义数据项别名

<ti-tree-select id="ti-tree-select"></ti-tree-select>

自定义右侧内容部分

<ti-tree-select id="ti-tree-select">
<div id="ti-tree-content"></div>
</ti-tree-select>

ti-tree-select API

属性 Properties

名称类型必填默认值说明备注
optionsArray<Option>-选项数据,Option类型,普通模式需包含 children 字段,自定义模式不需要 children 字段-
default-indexnumber0左侧选中项的索引-
active-valuearray-右侧选中项的 value,对应option 子项 value 值-
disabled-valuearray-禁用项,option 子项 value 值-
heightnumber | string100%高度-
max-countnumber-最多可选项数-
iconstring-选项右侧 icon-
aliasRecord<string, string>-数据项默认字段名label value children的别名,用于自定义数据-
ext-stylestring | Record<string, string>-根节点样式-

Option

API 属性中的 options 为一个数组或者二维数组,数组中的每一个对象有以下 key:

名称类型必填默认值说明备注
labelstring-展示文字-
valuestring-唯一id-
childrenArray<{label: string, value: string}>-右侧内容区域列表数据项,其中value值对应active-value和disabled-value中的值-

事件 Events

名称参数列表描述备注
change-nav(e: CustomEvent) => void父选项改变是触发-
change-item(e: CustomEvent) => void子选项改变是触发-

插槽 Slots

名称说明备注
default默认插槽-

外部样式类 External Classes

名称说明备注
ext-class根节点样式类名-
tree-select-sidebar左侧 sidebar 样式类名-
tree-select-container右侧容器样式类名-

CSS 变量 CSS Variable

变量默认值说明备注
--tree-select-cell-h108rpx右侧默认选项内容的每项高度-
--tree-select-active-color#fa2c19右侧默认选项内容选中颜色-
--tree-select-disabled-color#c4c4c4右侧默认选项内容禁用颜色-