当前位置: 首页 > 文档资料 > FeArt 中文文档 >

TreeSelect 纵向选择

优质
小牛编辑
131浏览
2023-12-01

使用指南

组件介绍

引入方式

import { TreeSelect } from 'feart';

components: {
  'fe-tree-select': TreeSelect
}

代码演示

<fe-tree-select> </fe-tree-select>

API

Props

参数说明类型默认值
dataSource分类显示所需的数据Array[]
text显示文本字段Stringtext
nid取值字段Stringid
height高度String,Number300
parent-nav-id左侧父级选中 idString-
value右侧子节点选择项,高亮的数据值String,Number-
high-light-color高亮显示颜色String-
----

Event

事件名说明回调参数
parent-click左侧父级选中触发id:选中节点的 id
children-click右侧子节点选择触发id:选中节点的 id,record:选中节点数据
click选中节点触发pid:父节点选中的 id, id:子节点选中的 id(选择父节点时,为空)
---

dataSource 数据格式

数组数据中包含基本格式和自定义扩展两种格式

基本格式

有效属性为 text, id, 可选disabled无法选中

[
  {
    "text": "上海",
    "id": "1",
    "children": [
      {
        "text": "黄浦区",
        "id": "101"
      },
      {
        "text": "静安区",
        "id": "102"
      },
      {
        "text": "陆家嘴",
        "id": "103"
      },
      {
        "text": "虹桥",
        "id": "104",
        "disabled": true // 无法选中
      }
    ]
  }
]

自定义扩展

有效属性为自定义的nidtext, 可选disabled无法选中, 例:nid为 cityId, text为 cityText

[
  {
    "cityText": "上海",
    "cityId": "1",
    "children": [
      {
        "cityText": "黄浦区",
        "cityId": "101"
      },
      {
        "cityText": "静安区",
        "cityId": "102"
      },
      {
        "cityText": "陆家嘴",
        "cityId": "103"
      },
      {
        "cityText": "虹桥",
        "cityId": "104",
        "disabled": true // 无法选中
      }
    ]
  }
]