TreeSelect

基础用法

<template>
  <ai-form ref="formEl" :model="formInfo" :formConfig="formConfig"></ai-form>
</template>

<script setup>
import { reactive, computed } from 'vue'

const regionOptions = [
  {
    value: 'cn',
    label: '中国',
    children: [
      { value: 'bg', label: '北京' },
      { value: 'cq', label: '重庆' }
    ]
  },
  {
    value: 'en',
    label: '英国',
    children: [{ value: 'lo', label: '伦敦' }]
  },
]

const formInfo = reactive({
  region: '',
})

const formConfig = computed(() => {
  return [
    {
      key: "region",
      label: "归属地区",
      type: "tree-select",
      model: "region",
      prop: "region",
      required: true,
      dictList: regionOptions,
      dictKey: "value",
      dictLabel: "label",
    },
  ]
})
</script>

Props

属性	说明	类型	默认值
type	`tree-select`	`string`	-
key	配置列表唯一标识	`string`	-
label	标签文本	`string`	-
model	属性名，它可以是属性的路径（如`a.b.0`）也可以是一个方法，返回属性路径，该属性是必填的	`string`/`Function`	-
prop	一般和属性名保持一致，在使用了`validate`、`resetFields`的方法时，该属性是必填的	`string`/`Function`	-
width	宽度（1-24）	`number`	`12`
noneLabel	是否隐藏标签	`boolean`	`false`
placeholder	输入框占位文本	`string`	-
disabled	是否禁用	`boolean`/`Function`	`false`
size	输入框尺寸	`string`	-
required	是否必填	`boolean`	`false`
validator	自定义校验方法	`Function`	-
data	数据源	`array`	`[]`
nodeKey	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	`string`	-
defaultProps	树结构的props	`object`	-
multiple	是否多选	`boolean`	`false`
teleported	弹层是否使用`teleport`	`boolean`	`true`
filterable	是否可筛选	`boolean`	`false`
clearable	是否显示清除按钮	`boolean`	`false`
lazy	是否懒加载子节点，需与`load`方法结合使用	`boolean`	`false`
load	加载子树数据的方法，仅当`lazy`属性为`true`时生效	`Function`	-
accordion	是否每次只打开一个同级树节点展开	`boolean`	`false`
filterNodeMethod	对树节点进行筛选时执行的方法，返回`false`则表示这个节点会被隐藏	`Function`	-
currentNodeKey	当前选中的节点	`string`/`number`	-
showCheckbox	节点是否可被选择	`boolean`	`false`
defaultCheckedKeys	默认勾选的节点的`key`的数组	`array`	-
defaultExpandedKeys	默认展开的节点的`key`的数组	`array`	-
renderContent	树节点的内容区的渲染 Function	`Function`	-
collapseTags	多选时是否将选中值按文字的形式展示	`boolean`	`false`
collapseTagsTooltip	当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签	`boolean`	`false`
showErrorTooltip	是否展示错误提示	`boolean`	`true`
changeFun	当绑定值变化时触发的回调函数	`Function`	-
showFun	是否展示的判断函数，返回一个`boolean`值	`Function`	-

TreeSelect ​

基础用法 ​

Props ​

TreeSelect

基础用法

Props