分类选择 TreeSelect

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

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-tree-select": "@titian-design/weapp/tree-select/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-tree-select": "platform://titian-mp/ti-tree-select"
  }
}

用法示例

基础用法

• App.wxml
• index.js

code

copy

code

<ti-tree-select options="{{options}}" />

copy

code

Page({
  data: {
    options: [
      {
        label: '侧边导航',
        value: 'a1',
        children: [
          { label: '标题文字', value: 'a1-1' },
          { label: '标题文字', value: 'a1-2' },
        ],
      },
      {
        label: '侧边导航2',
        value: 'a2',
        children: [
          { label: '标题2文字', value: 'a2-1' },
          { label: '标题2文字', value: 'a2-2' },
        ],
      },
    ],
  },
});

自定义内容

content-a

• App.wxml
• index.js

code

copy

code

<ti-tree-select options="{{options}}" bind:change-nav="onChangeNav">
  <view wx:if="{{index === 0}}">content-a</view>
  <view wx:if="{{index === 1}}">content-b</view>
</ti-tree-select>

copy

code

Page({
  data: {
    index: 0,
    options: [
      {
        label: '侧边导航',
        value: 'a1',
      },
      {
        label: '侧边导航2',
        value: 'a2',
      },
    ],
  },
  onChangeNav(e) {
    this.setData({
      index: e.detail.index,
    });
  },
});

自定义数据项别名

• App.wxml
• index.js

code

copy

code

<ti-tree-select options="{{options}}" alias="{{alias}}" />

copy

code

Page({
  data: {
    options: [
      {
        name: '侧边导航',
        id: 'a1',
        list: [
          { name: '标题文字', id: 'a1-1' },
          { name: '标题文字', id: 'a1-2' },
        ],
      },
      {
        name: '侧边导航2',
        id: 'a2',
        list: [
          { name: '标题2文字', value: 'a2-1' },
          { name: '标题2文字', value: 'a2-2' },
        ],
      },
    ],
  },
});

ti-tree-select API

属性 Properties

名称	类型	必填	默认值	说明	备注
options	Array<Option>	是	-	选项数据，Option类型，普通模式需包含 children 字段，自定义模式不需要 children 字段	-
default-index	number	否	0	左侧选中项的索引	-
active-value	array	否	-	右侧选中项的 value，对应option 子项 value 值	-
disabled-value	array	否	-	禁用项，option 子项 value 值	-
height	number | string	否	100%	高度	-
max-count	number	否	-	最多可选项数	-
icon	string	否	-	选项右侧 icon	-
alias	Record<string, string>	否	-	数据项默认字段名label value children的别名，用于自定义数据	-
ext-style	string | Record<string, string>	否	-	根节点样式	-

Option

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

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

事件 Events

名称	参数列表	描述	备注
bind:change-nav	(e: WechatMiniprogram.CustomEvent<{index: number, item: Record<string, any>}>) => void	父选项改变是触发	-
bind:change-item	(e: WechatMiniprogram.CustomEvent<{active-value: array, current: Record<string, any>, item: Record<string, any>}>) => void	子选项改变是触发	-

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variable

变量	默认值	说明	备注
--tree-select-active-color	theme.color.brand.1000	右侧默认选项内容选中颜色	-
--tree-select-disabled-color	theme.color.gray.texticon.250	右侧默认选项内容禁用颜色	-