# HorTreeSelectPopup


### 介绍
树形级联选择器


## 代码演示

### children
```html
<hor-cell
  label="竞拍城市"
  :arrow="true"
  :value="citys"
  :formatter="(v) => v.map((i:TreeSelectOption) => i.label).join(',')"
  @click="cityHandle()"
/>
<hor-cell
  label="value"
  :arrow="true"
  :value="citys"
  :formatter="(v) => v.map((i:TreeSelectOption) => i.value).join(',')"
  @click="cityHandle()"
/>
<hor-tree-select-popup ref="refCityPopup" :options="orgAreas" title="竞拍城市">
  <template #right>
    <div> 提交111 </div>
  </template>
</hor-tree-select-popup>
<script setup lang="ts">
  import type { HorTreeSelectPopupInstance, TreeSelectOption } from '@daysnap/horn-ui'
  import { HorCell, HorTreeSelectPopup } from '@daysnap/horn-ui'
  import { ref, type Ref } from 'vue'
  const refCityPopup = ref() as Ref<HorTreeSelectPopupInstance>
  const citys = ref<any>([])
  const orgAreas: TreeSelectOption[] = [
    {
      label: '全部',
      value: 'all',
    },
    {
      label: '华东大区',
      value: 10325,
      children: [
        {
          children: [
            {
              label: '宁波常信拍卖有限公司',
              value: 9175,
            },
            {
              label: '[市]温州分部',
              value: 76505,
            },
          ],
          label: '浙江分部',
          value: 8305,
        },
        {
          children: [
            {
              label: '无锡东信机动车拍卖有限公司',
              value: 8296,
            },
            {
              label: '[市]徐州分部',
              value: 75907,
            },
            {
              label: '[市]南京分部',
              value: 76205,
            },
            {
              label: '[市]苏州分部',
              value: 76211,
            },
            {
              label: '[市]无锡分部',
              value: 76641,
            },
            {
              label: '[市]南通分部',
              value: 78379,
            },
          ],
          label: '江苏分部',
          value: 8310,
        },
        {
          children: [
            {
              label: '[市]合肥分部',
              value: 75951,
            },
            {
              label: '[市]芜湖分部',
              value: 75955,
            },
          ],
          label: '安徽分部',
          value: 9085,
        },
        {
          children: [
            {
              label: '[市]郑州分部',
              value: 80139,
            },
          ],
          label: '河南分部',
          value: 80137,
        },
      ],
    },
  ]
  const cityHandle = function () {
    refCityPopup.value
      .show({
        modelValue: citys.value,
        deepSelect: true,
      })
      .then((res) => {
        citys.value = res.selectedOptions
      })
  }
</script>
```

### 多列
```html
<hor-cell
  label="竞拍城市"
  :arrow="true"
  :value="test"
  :formatter="(v) => v.join(',')"
  @click="cityHandle2()"
/>
<hor-cell
  label="value"
  :arrow="true"
  :value="test"
  :formatter="(v) => v.join(',')"
  @click="cityHandle2()"
/>
<hor-tree-select-popup ref="refCityPopup" :options="orgAreas" title="竞拍城市">
  <template #right>
    <div> 提交111 </div>
  </template>
</hor-tree-select-popup>
<script setup lang="ts">
  import type { HorTreeSelectPopupInstance, TreeSelectOption } from '@daysnap/horn-ui'
  import { HorCell, HorTreeSelectPopup } from '@daysnap/horn-ui'
  import { ref, type Ref } from 'vue'
  const testList: TreeSelectOption[][] = [
    new Array(20).fill(1).map((v, i) => ({
      label: i + '',
      value: i,
    })),
    new Array(20).fill(1).map((v, i) => ({
      label: i + '',
      value: i,
    })),
    new Array(20).fill(1).map((v, i) => ({
      label: i + '',
      value: i,
    })),
  ]
  const test = ref<any>([2, 14, 15])
  const cityHandle2 = async function () {
    await refCityPopup.value
      .show({
        modelValue: test.value,
        options: testList,
        autoSelect: true,
      })
      .then((res) => {
        test.value = res.selectedValues
      })
  }
</script>
```


## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horTreeSelectPopupProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>

### 插槽 Slots

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>


### 实例方法

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>



<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell } from '../hor-cell'
  import { HorTreeSelectPopup, horTreeSelectPopupProps } from '.'
  import { parseType } from '../utils'
</script>