# 下拉树 TreeSelect
用清晰的层级结构展示信息，可展开或折叠。
# 基础使用
基础使用
基础的树形结构展示以及选择。
<title>基础使用</title>
<describe>基础的树形结构展示以及选择。</describe>
<template>
<hc-tree-select :data="data" v-model="value" style="width: 400px;"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' }
]
}
}
}
</script>
# 单选禁用场景 控件级禁用
基础使用
基础的树形结构展示以及选择。
<title>基础使用</title>
<describe>基础的树形结构展示以及选择。</describe>
<template>
<hc-tree-select :data="data" v-model="value" style="width: 400px;" disabled></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' }
]
}
}
}
</script>
# 单选禁用场景 选项禁用
单选禁用场景 选项禁用
当前选中的值被禁用，无法进行切换
<title>单选禁用场景 选项禁用</title>
<describe>当前选中的值被禁用，无法进行切换</describe>
<template>
<hc-tree-select :data="data" v-model="value" style="width: 400px;"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b', disabled: true }
]
}
}
}
</script>
:::
# 单选禁用场景 选项禁用
单选禁用场景 选项禁用
当前禁用的选项无法被选择
<title>单选禁用场景 选项禁用</title>
<describe>当前禁用的选项无法被选择</describe>
<template>
<hc-tree-select :data="data" v-model="value" style="width: 400px;"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '91c45ad8-e9bb-e814-8b9e-94c69104026b',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b', disabled: true }
]
}
}
}
</script>
# 下拉多选
下拉多选
适用性较广的基础多选，用 Tag 展示已选项
<title>下拉多选</title>
<describe>适用性较广的基础多选，用 Tag 展示已选项</describe>
<template>
<hc-tree-select :data="data" v-model="value" multiple style="width: 400px;"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '',
text: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' }
]
}
}
}
</script>
# 下拉多选 选项级禁用
下拉多选 选项级禁用
下拉多选 未选中的选项级禁用
<title>下拉多选 选项级禁用</title>
<describe>下拉多选 未选中的选项级禁用</describe>
<template>
<hc-tree-select :data="data" v-model="value" multiple style="width: 400px;"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '',
text: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b', disabled: true }
]
}
}
}
</script>
# 下拉多选 选项级禁用
下拉多选 选项级禁用
下拉多选 选中的选项存在禁用，无法删除禁用的项
<title>下拉多选 选项级禁用</title>
<describe>下拉多选 选中的选项存在禁用，无法删除禁用的项</describe>
<template>
<hc-tree-select :data="data" v-model="value" multiple style="width: 400px;"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '91c45ad8-e9bb-e814-8b9e-94c69104026b,91c45ad8-e9bb-e811-8b9e-94c69104026b',
text: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b', disabled: true }
]
}
}
}
</script>
# 级联选择
级联选择
选择子级会联动父级，选择父级会将所有子级选中
<title>级联选择</title>
<describe>选择子级会联动父级，选择父级会将所有子级选中</describe>
<template>
<hc-tree-select :data="data" v-model="value" multiple check-recursive style="width: 400px;"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '',
text: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' }
]
}
}
}
</script>
# 显示策略 显示完整层级
显示完整层级名称
选择后会将已选项以及所有父级文本展示出来。
<title>显示完整层级名称</title>
<describe>选择后会将已选项以及所有父级文本展示出来。</describe>
<template>
<hc-tree-select :data="data" v-model="value" style="width: 400px;" show-strategy="all"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '',
text: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' }
]
}
}
}
</script>
# 显示策略 显示当前层级及其父层级
显示当前层级及其父层级名称
选择后会将已选项以及当前父级文本展示出来。
<title>显示当前层级及其父层级名称</title>
<describe>选择后会将已选项以及当前父级文本展示出来。</describe>
<template>
<hc-tree-select :data="data" v-model="value" style="width: 400px;" show-strategy="currentAndParent"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '',
text: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' }
]
}
}
}
</script>
:::
# 显示策略 显示当前层级
显示当前层级名称
选择后会将已选项当前文本展示出来。
<title>显示当前层级名称</title>
<describe>选择后会将已选项当前文本展示出来。</describe>
<template>
<hc-tree-select :data="data" v-model="value" style="width: 400px;" show-strategy="current"></hc-tree-select>
</template>
<script>
export default {
data () {
return {
value: '',
text: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' }
]
}
}
}
</script>
# 插槽
备选项选择框添加插槽
备选项选择框中允许添加页眉('header')和页脚('footer')插槽。
<title>备选项选择框添加插槽</title>
<describe>备选项选择框中允许添加页眉('header')和页脚('footer')插槽。</describe>
<template>
<hc-tree-select :data="data" v-model="value" style="width: 400px;" show-strategy="current">
<template #header>
<div style="padding: 6px 12px;">
<hc-switch v-model="containChild" :disabled="disabled" size="mini"></hc-switch>包含子公司
</div>
</template>
<template #footer>
<div style="padding: 6px 12px;">
<hc-checkbox v-model="disabled" size="mini"></hc-switch>禁用包含子公司
</div>
</template>
</hc-tree-select>
</template>
<script>
export default {
data () {
return {
disabled: false,
containChild: false,
value: '',
text: '',
data: [
{ value: '90c45ad8-e9bb-e811-8b9e-94c69104026b', text: '集团', parent: '' },
{ value: '91c45ad8-e9bb-e811-8b9e-94c69104026b', text: '武汉公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '92c45ad8-e9bb-e811-8b9e-94c69104026b', text: '上海公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '93c45ad8-e9bb-e811-8b9e-94c69104026b', text: '深圳公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '94c45ad8-e9bb-e811-8b9e-94c69104026b', text: '广州公司', parent: '90c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e812-8b9e-94c69104026b', text: '建模平台', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e813-8b9e-94c69104026b', text: '成本', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' },
{ value: '91c45ad8-e9bb-e814-8b9e-94c69104026b', text: '售楼', parent: '91c45ad8-e9bb-e811-8b9e-94c69104026b' }
]
}
}
}
</script>
# 属性及事件
# HcTreeSelect属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
value | 值（提供v-model），多选模式以，分隔 | string | -- | ---- |
data | 下拉树数据结构, value: 当前Id; text: 名称; parent: 父级id; disabled: 选项禁用; | array | -- | ---- |
placeholder | 为空提示 | string | -- | ---- |
multiple | 允许多选 | boolean | -- | false |
text.sync | 文本, 多选时为逗号分隔文本, 必须使用 .sync 修饰符同步 | string | -- | -- |
viewable | 是否为查看模式 | boolean | -- | false |
disabled | 是否禁用 | boolean | -- | false |
expand-level | 自定义展开层级 | number | -- | 2 |
filterable | 是否启用本地过滤 | boolean | -- | false |
check-recursive | 选择后父级子级联动勾选（多选模式生效） | boolean | -- | false |
disable-child-select | 父级禁用时，联动禁用子级（选项禁用场景生效） | boolean | -- | false |
clearable | 是否允许清空 | boolean | -- | true |
collapse-tags | 是否开启选项汇总，溢出时使用数字显示 | boolean | -- | false |
show-strategy | 显示策略 | string | current: 显示当前层级; currentAndParent: 显示当前层级及其父层级; all: 显示所有层级 | current |
# HcTreeSelect事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
change | 值改变事件 | event.value：当前选择的值 |
# 插槽
| 名称 | 说明 |
|---|---|
header | 备选项选择框的页眉插槽 |
footer | 备选项选择框的页脚插槽 |
登录
← 下拉框 Select 数值 Spinner →