树选择

介绍

可以对树形结构数据进行选择。

API

Props

参数名	描述	类型	默认值
status	状态	'default' |'disabled'|'hide'|'readonly'	'default'
showLabel	显示标题	boolean	-
title	标题	string	-
value	默认值	string	-
placeholder	占位提示	string	'请选择'
allowClear	允许清除, 右侧图标配置后, 允许清除配置项无效	boolean	true
allowSearch	可搜索	boolean	false
clickable	点击反馈	boolean	true
leftIcon	左侧图标	string	-
rightIcon	右侧图标, 右侧图标配置后, 允许清除配置项无效	string	-
limit	最大选择数量	number	-
options	选项数据	Options	-
fieldNames	指定字段名	{key:string,title:string,children:string}	{key:'key',title:'title',children:'children'}
multiple	多选	boolean	false
limit	最大选择数量	number	-
isLoadMore	开启异步加载	boolean	false
loadMore	异步加载函数	Function	-
baseStyle	自定义样式	string	-
customClass	类名绑定， 绑定类的名称	string	-
border	内边框	boolean	false
colon	标题后添加冒号	boolean	false
labelWidth	标题宽度	{value:string,unit:'px'|'vh'|'em'|'%'}	{value: "6.2",unit: "em"}
labelAlign	标题对齐方式	'top'|'left'|'center'|'right'	'left'
inputAlign	内容对齐方式	'top'|'left'|'center'|'right'	'left'
center	内容垂直居中	boolean	false
uniqueKey	唯一标识 ， 组件的唯一标识	string	-
name	表单字段	string	-
tip	气泡提醒	string	-
isLink	展示右侧箭头并开启点击反馈	boolean	false
arrowDirection	箭头方向	'up'|'down'|'left'|'right'	'right'
extraSlot	右侧额外插槽	boolean	false
validate	校验	Validate	-
loop	循环 ， 循环渲染设置	Loop	-

Events

事件名	描述	参数
onChange	选择值变化时	ctx params:Params loop:LoopParams
onConfirm	点击完成按钮时	ctx params:Params loop:LoopParams
onCancel	点击取消按钮时	ctx loop:LoopParams
onSearch	用户搜索时触发	ctx params:{value:string} loop:LoopParams
onClear	点击清除按钮时	ctx params:Params loop:LoopParams
onClickLeftIcon	点击左侧图标时	ctx params:Params loop:LoopParams
onClickRightIcon	点击右侧图标时	ctx params:Params loop:LoopParams

Type

// 选项数据
type Options = {
  "key":string,
  "title":string,
  "children"?:Options
}[]
// 事件参数
type Params = {value:string} //多选为{value:string[]}

常见场景配置

异步加载

开启异步加载，新增异步加载函数

// 选项数据
function action(ctx, params){
  const {nodeData,resolve} = params;
  nodeData.children = [
    {
      key:"key",
      title:"title"
    }
  ];
  resolve();
}