Honeycomb Design

# 下拉树 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" show-long-text 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>

# 下拉多选

下拉多选

适用性较广的基础多选，用 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 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>

# 属性及事件

# 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
show-long-text change事件是否显示完成层级 boolean -- false
check-recursive 选择后父级子级联动勾选（多选模式生效） boolean -- false
disable-child-select 父级禁用时，联动禁用子级（选项禁用场景生效） boolean -- false
clearable 是否允许清空 boolean -- true
collapse-tags 是否开启选项汇总，溢出时使用数字显示 boolean -- false

# HcTreeSelect事件

事件 说明 回调参数
change 值改变事件 event.value：当前选择的值

← 数值 Spinner →