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 | 显示文本字段 | String | text |
nid | 取值字段 | String | id |
height | 高度 | String,Number | 300 |
parent-nav-id | 左侧父级选中 id | String | - |
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 // 无法选中
}
]
}
]
自定义扩展
有效属性为自定义的
nid
和text
, 可选disabled
无法选中, 例:nid
为 cityId,text
为 cityText
[
{
"cityText": "上海",
"cityId": "1",
"children": [
{
"cityText": "黄浦区",
"cityId": "101"
},
{
"cityText": "静安区",
"cityId": "102"
},
{
"cityText": "陆家嘴",
"cityId": "103"
},
{
"cityText": "虹桥",
"cityId": "104",
"disabled": true // 无法选中
}
]
}
]