建设管理平台

SuitQbsTreeSelect 分部分项qbs树选择器

# 说明

基于vue-treeselect下拉框封装 支持vue-treeselect基本方法

# 基本示例

回显:
<template>
    <div style="width:200px">
        <suit-qbs-tree-select  v-model="value" />
       <div> 回显:{{value}}</div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        value: null
      }
    }
  }
</script>
Expand Copy

# 多选

通过设置multiple 实现多选，注意当前组件限制只能选择子节点

回显:
<template>
    <div style="width:200px">
        <suit-qbs-tree-select :multiple="true" v-model="value" />
       <div> 回显:{{value}}</div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        value: null
      }
    }
  }
</script>
Expand Copy

:::

# 设置属性层级

通过设置treeLevel 实现控制层级，注意值必须大于0才生效

回显:
<template>
    <div style="width:200px">
        <suit-qbs-tree-select :multiple="true" :treeLevel="3" v-model="value" />
       <div> 回显:{{value}}</div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        value: null
      }
    }
  }
</script>
Expand Copy

:::

# 属性（Props）

属性名 类型 默认值 描述
treeLevel Number Infinity 指定树形的层级，默认无限制。
value Array [] 指定当前选中的节点。
options Array [] 指定可供选择的节点选项。
multiple Boolean false 是否允许多选。
clearable Boolean true 是否显示清除按钮。
searchable Boolean true 是否显示搜索框。
disabled Boolean false 是否禁用组件。
flat Boolean false 是否将选项展平（取消分层结构）。
clearOnSelect Boolean false 在选择节点时是否清除搜索框中的内容。
closeOnSelect Boolean true 在选择节点后是否关闭下拉框。
openOnClick Boolean true 是否点击打开下拉框。
openOnArrow Boolean false 是否使用箭头键打开下拉框。
alwaysOpen Boolean false 是否一直保持下拉框打开状态。
autoFocus Boolean false 是否自动聚焦到搜索框。
autoLoadRootOptions Boolean true 是否自动加载根节点选项。
autoDeselectAncestors Boolean false 是否在选择节点时自动取消选择其祖先节点。
autoSelectAncestors Boolean false 是否在选择节点时自动选择其祖先节点。
autoSelectDescendants Boolean false 是否在选择节点时自动选择其后代节点。
flatChildren Boolean false 在 flat 模式下，是否展平子节点。
flatResults Boolean false 在 flat 模式下，是否展平搜索结果。
showCount Boolean false 是否在选项旁边显示子节点数量。
limit Number null 限制最多可以选择的节点数量。
limitText Function null 自定义超过限制时的提示文本。
limitReachedText String null 自定义超过限制时的提示文本。
placeholder String null 占位符文本。
noOptionsText String null 当没有可用选项时的提示文本。
noResultsText String null 当没有匹配结果时的提示文本。
loadingText String null 加载选项时的提示文本。
loadingErrorText String null 加载选项失败时的提示文本。
searchPromptText String null 搜索提示文本。
searchNoResultsText String null 搜索无结果时的提示文本。
searchPlaceholderText String null 搜索框占位符文本。
indent Number 20 节点缩进距离（单位为像素）。
listAutoHeight Boolean false 列表是否根据选项数量自动调整高度。
listMaxHeight Number null 列表的最大高度（单位为像素）。
optionHeight Number 36 单个选项的高度（单位为像素）。
showDropdown Boolean true 是否显示下拉框。
dropdownClass String null 下拉框容器的自定义类名。
dropdownMenuClass String null 下拉框菜单的自定义类名。
dropdownArrowClass String null 下拉框箭头的自定义类名。
zIndex Number null 下拉框的 z-index 值。

# 事件（Events）

事件名 参数 描述
open (instance) 当下拉框打开时触发。
close (value, instanceId) 当下拉框关闭时触发。
input (value, instanceId) 在值更改后发出。
select (node, instance) 当选中节点时触发。
deselect (node, instance) 取消选择选项后发出。
blur (event, instance) 当失去焦点时触发。
focus (event, instance) 当获得焦点时触发。
search-change (searchQuery) 当搜索框内容发生变化时触发。
search-focus () 当搜索框获得焦点时触发。
search-blur () 当搜索框失去焦点时触发。
load-options (vm) 当加载选项时触发。
load-root-options (vm) 当加载根节点选项时触发。
load-child-options (node, callback) 当加载子节点选项时触发。

审批意见