TreeSelect

원문 보기 위키 갱신 2026.10.11

TreeSelect (트리 선택 상자)

리스트에서 중첩 구조의 데이터를 선택할 수 있는 컴포넌트예요.

출처: 문서

본문

기본 사용법

:::demo

<template>
  <d-tree-select v-model="value" :treeData="data" placeholder='树形选择框'></d-tree-select>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const data = ref([{
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1',
        }]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{
          label: '三级 2-1-1',
        }]
      }, {
        label: '二级 2-2',
        children: [{
          label: '三级 2-2-1',
        }]
      }]
    }, {
      label: '一级 3',
      children: [{
        label: '二级 3-1',
        children: [{
          label: '三级 3-1-1',
        }]
      }, {
        label: '二级 3-2',
        children: [{
          label: '三级 3-2-1',
        }]
      }]
    }])

    return {
      data,
      value
    }
  }
})
</script>

:::

비활성화

:::demo

<template>
  <d-tree-select v-model="value" :treeData="data" :disabled="true"></d-tree-select>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const data = ref([{
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1',
        }]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{
          label: '三级 2-1-1',
        }]
      }, {
        label: '二级 2-2',
        children: [{
          label: '三级 2-2-1',
        }]
      }]
    }, {
      label: '一级 3',
      children: [{
        label: '二级 3-1',
        children: [{
          label: '三级 3-1-1',
        }]
      }, {
        label: '二级 3-2',
        children: [{
          label: '三级 3-2-1',
        }]
      }]
    }])

    return {
      data,
      value
    }
  }
})
</script>

:::

내용 비우기 가능

:::demo

<template>
  <d-tree-select v-model="value" :treeData="data" :allowClear="true"></d-tree-select>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const data = ref([{
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1',
        }]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{
          label: '三级 2-1-1',
        }]
      }, {
        label: '二级 2-2',
        children: [{
          label: '三级 2-2-1',
        }]
      }]
    }, {
      label: '一级 3',
      children: [{
        label: '二级 3-1',
        children: [{
          label: '三级 3-1-1',
        }]
      }, {
        label: '二级 3-2',
        children: [{
          label: '三级 3-2-1',
        }]
      }]
    }])

    return {
      data,
      value
    }
  }
})
</script>

:::

다중 선택

:::demo

<template>
  <d-tree-select v-model="value" :treeData="data" :multiple='true'></d-tree-select>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const data = ref([{
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1',
        }]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{
          label: '三级 2-1-1',
        }]
      }, {
        label: '二级 2-2',
        children: [{
          label: '三级 2-2-1',
        }]
      }]
    }, {
      label: '一级 3',
      children: [{
        label: '二级 3-1',
        children: [{
          label: '三级 3-1-1',
        }]
      }, {
        label: '二级 3-2',
        children: [{
          label: '三级 3-2-1',
        }]
      }]
    }])

    return {
      data,
      value
    }
  }
})
</script>

:::

잎 노드만 선택 가능

:::demo

<template>
  <d-tree-select v-model="value" :treeData="data" :leafOnly='true'></d-tree-select>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const data = ref([{
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1',
        }]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{
          label: '三级 2-1-1',
        }]
      }, {
        label: '二级 2-2',
        children: [{
          label: '三级 2-2-1',
        }]
      }]
    }, {
      label: '一级 3',
      children: [{
        label: '二级 3-1',
        children: [{
          label: '三级 3-1-1',
        }]
      }, {
        label: '二级 3-2',
        children: [{
          label: '三级 3-2-1',
        }]
      }]
    }])
    
    return {
      data,
      value
    }
  }
})
</script>

:::

아이콘 커스터마이즈

:::demo

<template>
  <d-tree-select v-model="value" :treeData="data">
    <template #default="{ item }">
      <span class="tree-select-demo-icon" :class="[item?.data?.type]">{{item.label}}</span>
    </template>
  </d-tree-select>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const data = ref([{
      label: '一级 1',
      data: { type: "ppt" },
      children: [{
        label: '二级 1-1',
        data: { type: "doc" },
        children: [{
          label: '三级 1-1-1',
          data: { type: "ppt" },
        }]
      }]
    }, {
      label: '一级 2',
      data: { type: "doc" },
      children: [{
        label: '二级 2-1',
        data: { type: "ppt" },
        children: [{
          label: '三级 2-1-1',
          data: { type: "xls" },
        }]
      }, {
        label: '二级 2-2',
        data: { type: "pdf" },
        children: [{
          label: '三级 2-2-1',
          data: { type: "xls" },
        }]
      }]
    }, {
      label: '一级 3',
      data: { type: "pdf" },
      children: [{
        label: '二级 3-1',
        data: { type: "mix" },
        children: [{
          label: '三级 3-1-1',
          data: { type: "doc" },
        }]
      }, {
        label: '二级 3-2',
        data: { type: "doc" },
        children: [{
          label: '三级 3-2-1',
          data: { type: "xls" },
        }]
      }]
    }])
    
    return {
      data,
      value
    }
  }
})
</script>
<style>

.tree-select-demo-icon::before {
  width: 16px;
  height: 16px;
  font-style: italic;
  font-size: 12px;
  line-height: 14px;
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 2px;
}

.tree-select-demo-icon.doc::before {
  content: 'W';
  background-color: #295396;
  border: 1px #224488 solid;
}

.tree-select-demo-icon.pdf::before {
  content: 'A';
  background-color: #da0a0a;
  border: 1px #dd0000 solid;
}

.tree-select-demo-icon.xls::before {
  content: 'X';
  background-color: #207044;
  border: 1px #18683c solid;
}

.tree-select-demo-icon.ppt::before {
  content: 'P';
  background-color: #d14424;
  border: 1px #dd4422 solid;
}

.tree-select-demo-icon.mix::before {
  content: '?';
  font-style: normal;
  background-color: #aaaaaa;
  border: 1px #999999 solid;
}
.tree-select-demo-icon-next {
  margin-left: 8px;
}


</style>

:::

라벨화

:::demo

<template>
  <d-tree-select v-model="value" :treeData="data" placeholder='树形选择框' enableLabelization='true'></d-tree-select>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const data = ref([{
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1',
        }]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{
          label: '三级 2-1-1',
        }]
      }, {
        label: '二级 2-2',
        children: [{
          label: '三级 2-2-1',
        }]
      }]
    }, {
      label: '一级 3',
      children: [{
        label: '二级 3-1',
        children: [{
          label: '三级 3-1-1',
        }]
      }, {
        label: '二级 3-2',
        children: [{
          label: '三级 3-2-1',
        }]
      }]
    }])

    return {
      data,
      value
    }
  }
})
</script>

:::

:::demo

<template>
  <d-tree-select v-model="value" :treeData="data" :multiple='true' enableLabelization='true'></d-tree-select>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const value = ref('')
    const data = ref([{
      label: '一级 1',
      children: [{
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1',
        }]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{
          label: '三级 2-1-1',
        }]
      }, {
        label: '二级 2-2',
        children: [{
          label: '三级 2-2-1',
        }]
      }]
    }, {
      label: '一级 3',
      children: [{
        label: '二级 3-1',
        children: [{
          label: '三级 3-1-1',
        }]
      }, {
        label: '二级 3-2',
        children: [{
          label: '三级 3-2-1',
        }]
      }]
    }])

    return {
      data,
      value
    }
  }
})
</script>

:::

TreeSelect 파라미터

파라미터	타입	기본값	설명	Demo 링크
treeData	TreeData		필수, 트리 선택 박스 콘텐츠	기본 사용법
placeholder	string	'선택하세요'	선택, 입력창 기본 표시 콘텐츠 변경	기본 사용법
disabled	boolean	false	선택, 값이 true면 사용자 사용 금지	비활성화
allowClear	boolean	false	선택, 값이 true면 입력창 콘텐츠 비우기 가능	비우기 가능
multiple	boolean	false	선택, 값이 true면 여러 항목 선택 가능	다중 선택
leafOnly	boolean	false	선택, 값이 true면 리프 노드만 선택 가능	리프 노드만 선택 가능
enableLabelization	boolean	false	선택, 값이 true면 리프 노드만 선택 가능	태그화

인터페이스 & 타입 정의

interface TreeItem {
  id: number | string
  label: string
  parent?: TreeItem
  children?: Array<TreeItem>
  level?: number
  loading?: boolean
  opened?: boolean
  checked?: boolean
  halfchecked?: boolean
  disabled?: boolean
  
  [prop: string]: any
}

type TreeData = Array<TreeItem>

더 알아보기 (Learn more)

disabled, multiple, leafOnly 같은 옵션을 조합하면 다양한 트리 선택 시나리오를 커버할 수 있어요. 인터페이스 정의를 참고해 treeData 구조를 직접 구성해 보세요.