Cascader

Cascader (캐스케이더)

출처: 문서

본문

Cascader

옵션에 명확한 계층 구조가 있다면, Cascader를 사용해서 보고 선택할 수 있어요.

기본 사용법

자식 옵션 항목을 펼치는 방법은 두 가지가 있어요. options 속성에 옵션 배열을 할당하면 Cascader가 렌더링돼요. props.expandTrigger 속성은 자식 옵션을 펼치는 방법을 정의해요.

import { ref } from 'vue'

const value = ref([])

const props = {
  expandTrigger: 'hover' as const,
}

const handleChange = (value) => {
  console.log(value)
}

const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          { value: 'consistency', label: 'Consistency' },
          { value: 'feedback', label: 'Feedback' },
          { value: 'efficiency', label: 'Efficiency' },
          { value: 'controllability', label: 'Controllability' },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          { value: 'side nav', label: 'Side Navigation' },
          { value: 'top nav', label: 'Top Navigation' },
        ],
      },
    ],
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          { value: 'layout', label: 'Layout' },
          { value: 'color', label: 'Color' },
          { value: 'typography', label: 'Typography' },
          { value: 'icon', label: 'Icon' },
          { value: 'button', label: 'Button' },
        ],
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          { value: 'radio', label: 'Radio' },
          { value: 'checkbox', label: 'Checkbox' },
          { value: 'input', label: 'Input' },
          { value: 'input-number', label: 'InputNumber' },
          { value: 'select', label: 'Select' },
          { value: 'cascader', label: 'Cascader' },
          { value: 'switch', label: 'Switch' },
          { value: 'slider', label: 'Slider' },
          { value: 'time-picker', label: 'TimePicker' },
          { value: 'date-picker', label: 'DatePicker' },
          { value: 'datetime-picker', label: 'DateTimePicker' },
          { value: 'upload', label: 'Upload' },
          { value: 'rate', label: 'Rate' },
          { value: 'form', label: 'Form' },
        ],
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          { value: 'table', label: 'Table' },
          { value: 'tag', label: 'Tag' },
          { value: 'progress', label: 'Progress' },
          { value: 'tree', label: 'Tree' },
          { value: 'pagination', label: 'Pagination' },
          { value: 'badge', label: 'Badge' },
        ],
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          { value: 'alert', label: 'Alert' },
          { value: 'loading', label: 'Loading' },
          { value: 'message', label: 'Message' },
          { value: 'message-box', label: 'MessageBox' },
          { value: 'notification', label: 'Notification' },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          { value: 'menu', label: 'Menu' },
          { value: 'tabs', label: 'Tabs' },
          { value: 'breadcrumb', label: 'Breadcrumb' },
          { value: 'dropdown', label: 'Dropdown' },
          { value: 'steps', label: 'Steps' },
        ],
      },
      {
        value: 'others',
        label: 'Others',
        children: [
          { value: 'dialog', label: 'Dialog' },
          { value: 'tooltip', label: 'Tooltip' },
          { value: 'popover', label: 'Popover' },
          { value: 'card', label: 'Card' },
          { value: 'carousel', label: 'Carousel' },
          { value: 'collapse', label: 'Collapse' },
        ],
      },
    ],
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      { value: 'axure', label: 'Axure Components' },
      { value: 'sketch', label: 'Sketch Templates' },
      { value: 'docs', label: 'Design Documentation' },
    ],
  },
]

비활성화된 옵션

옵션 객체에 disabled 필드를 설정해서 옵션을 비활성화해요. 이 예시에서 options 배열의 첫 항목에는 disabled: true 필드가 있어서 비활성화된 상태예요. 기본적으로 Cascader는 각 옵션 객체의 disabled 필드를 확인해요. 옵션이 비활성화되었는지 나타내는 데 다른 필드 이름을 사용한다면, props.disabled 속성에 할당할 수 있어요(자세한 내용은 아래 API 표 참고). 물론 value, label, children 필드 이름도 같은 방식으로 커스터마이즈할 수 있어요.

Clearable

el-cascader에 clearable 속성을 설정하면 선택되고 호버했을 때 클리어 아이콘이 나타나요.

커스텀 클리어 아이콘 2.11.0

clear-icon 속성을 설정해서 클리어 아이콘을 커스터마이즈할 수 있어요.

마지막 레벨만 표시

입력에 모든 레벨 대신 마지막 레벨만 표시할 수 있어요. show-all-levels 속성은 모든 레벨을 표시할지 정의해요. false면 마지막 레벨만 표시돼요.

다중 선택

태그에 :props="props"를 추가하고 data props = { multiple: true }를 설정해서 다중 선택을 사용해요.

올바른 예:

const props = { multiple: true }

잘못된 예:

다중 선택을 사용할 때 기본적으로 모든 선택된 태그가 표시돼요. collapse-tags = true로 설정하면 선택된 태그를 접을 수 있어요. max-collapse-tags를 설정해서 최대 태그 수를 표시할 수 있고 기본값은 1이에요. collapse-tags-tooltip 속성을 사용해서 마우스를 접힌 텍스트 위에 올리면 확인할 수 있어요.

const props = { multiple: true }

const options = [
  {
    value: 1,
    label: 'Asia',
    children: [
      {
        value: 2,
        label: 'China',
        children: [
          { value: 3, label: 'Beijing' },
          { value: 4, label: 'Shanghai' },
          { value: 5, label: 'Hangzhou' },
        ],
      },
      {
        value: 6,
        label: 'Japan',
        children: [
          { value: 7, label: 'Tokyo' },
          { value: 8, label: 'Osaka' },
          { value: 9, label: 'Kyoto' },
        ],
      },
      {
        value: 10,
        label: 'Korea',
        children: [
          { value: 11, label: 'Seoul' },
          { value: 12, label: 'Busan' },
          { value: 13, label: 'Taegu' },
        ],
      },
    ],
  },
  {
    value: 14,
    label: 'Europe',
    children: [
      {
        value: 15,
        label: 'France',
        children: [
          { value: 16, label: 'Paris' },
          { value: 17, label: 'Marseille' },
          { value: 18, label: 'Lyon' },
        ],
      },
      {
        value: 19,
        label: 'UK',
        children: [
          { value: 20, label: 'London' },
          { value: 21, label: 'Birmingham' },
          { value: 22, label: 'Manchester' },
        ],
      },
    ],
  },
  {
    value: 23,
    label: 'North America',
    children: [
      {
        value: 24,
        label: 'US',
        children: [
          { value: 25, label: 'New York' },
          { value: 26, label: 'Los Angeles' },
          { value: 27, label: 'Washington' },
        ],
      },
      {
        value: 28,
        label: 'Canada',
        children: [
          { value: 29, label: 'Toronto' },
          { value: 30, label: 'Montreal' },
          { value: 31, label: 'Ottawa' },
        ],
      },
    ],
  },
]

모든 레벨의 옵션 선택

단일 선택에서는 리프 노드만 체크할 수 있고, 다중 선택에서는 부모 노드를 체크하면 결국 리프 노드가 체크돼요. 이 기능을 켜면 부모/자식 노드의 연결이 끊기고 어떤 레벨의 옵션이든 선택할 수 있어요. props.checkStrictly = true로 설정하면 노드의 체크 상태가 부모/자식 노드에 영향을 미치지 않게 되고, 어떤 레벨의 옵션이든 선택할 수 있어요.

const props1 = {
  checkStrictly: true,
}

const props2 = {
  multiple: true,
  checkStrictly: true,
}

동적 로딩

노드를 체크할 때 자식 노드를 동적으로 로드해요. lazy = true로 설정해서 동적 로딩을 사용하고, lazyload로 데이터 소스 로드 방법을 지정해야 해요. lazyload에는 두 개의 파라미터가 있는데, 첫 번째 node는 현재 클릭한 노드이고, resolve는 로딩이 끝났음을 알리는 콜백으로 반드시 호출해야 해요. 노드 상태를 더 정확하게 표시하려면 leaf 필드(props.leaf로 수정 가능)를 추가해서 리프 노드인지 나타낼 수 있어요. 그렇지 않으면 자식 노드가 있는지로 추론돼요.

Filterable

키워드로 옵션을 검색하고 선택해요. el-cascader에 filterable을 추가하면 필터링이 활성화돼요. Cascader는 label이나 부모의 label(show-all-levels에 따라)에 입력 키워드가 포함된 노드를 매칭해요. 물론 filter-method로 검색 로직을 커스터마이즈할 수 있는데, 함수를 받으며 첫 번째 파라미터는 노드, 두 번째는 키워드이고, 매칭 여부를 나타내는 boolean을 반환해야 해요.

커스텀 옵션 내용

cascader 노드의 내용을 커스터마이즈할 수 있어요. 스코프 슬롯으로 cascader 노드의 내용을 커스터마이즈할 수 있어요. 스코프 안에서 node와 data에 접근할 수 있는데, 각각 현재 노드의 Node 객체와 노드 데이터를 나타내요.

커스텀 제안 항목 2.9.5

suggestion-item 슬롯으로 필터 제안 항목을 커스터마이즈할 수 있어요. 스코프 안에서 item에 접근할 수 있는데, 제안 항목을 나타내요.

Cascader 패널

CascaderPanel은 Cascader의 핵심 컴포넌트로 단일 선택, 다중 선택, 동적 로딩 등 다양한 기능을 제공해요. el-cascader처럼 options로 대체 옵션을 설정하고 props로 다른 기능을 활성화할 수 있어요. 자세한 내용은 아래 API 폼을 참고해 주세요.

커스텀 태그 2.10.3

태그를 커스터마이즈할 수 있어요. el-cascader의 슬롯에 커스터마이즈된 태그를 넣어요. collapse-tags, collapse-tags-tooltip, max-collapse-tags는 동작하지 않아요.

import type { Tag } from 'element-plus'

const props = { multiple: true }

const getTags = (data: Tag[]) => {
  return data.map((item) => item.text)
}
const getTopLevelTags = (data: Tag[]) => {
  const set: Set = new Set()
  for (const datum of data) {
    let parent = datum.node?.parent
    while (parent && parent.level !== 1) {
      parent = parent.parent
    }
    const label = parent?.data?.label
    label && set.add(label)
  }
  return [...set]
}

체크된 전략 표시 2.10.5

다중 선택 모드에서 선택된 값이 표시되는 방식을 제어해요. 다중 선택 모드에서 show-checked-strategy를 사용해서 선택된 값의 표시 방식을 제어할 수 있어요. 기본 전략은 child로, 선택된 모든 자식 노드를 표시해요. parent 전략은 모든 자식이 선택되었을 때만 부모 노드를 표시해요.

import { ref } from 'vue'

const value1 = ref([])
const value2 = ref([])
const props = {
  multiple: true,
}

const handleChange1 = (value) => {
  console.log('Child strategy:', value)
}

const handleChange2 = (value) => {
  console.log('Parent strategy:', value)
}

노드 클릭으로 체크 2.10.5

multiple 또는 checkStrictly 속성만 사용해요. checkOnClickNode를 추가하면 접두사 아이콘과 함께 노드를 클릭할 수 있어요. showPrefix로 접두사 표시 여부를 토글해요. checkOnClickLeaf를 추가하면 리프 노드(마지막 자식)만 체크해요. 기본적으로 활성화돼 있어요.

import { computed, ref } from 'vue'

const value = ref()
const value2 = ref()
const showPrefix = ref(true)

const props1 = computed(() => ({
  showPrefix: showPrefix.value,
  checkStrictly: true,
  checkOnClickNode: true,
}))
const props2 = computed(() => ({
  showPrefix: showPrefix.value,
  multiple: true,
  checkOnClickNode: true,
}))

커스텀 헤더 & 푸터 2.10.5

슬롯을 사용해서 드롭다운의 헤더와 푸터를 모두 커스터마이즈할 수 있어요. 슬롯을 사용해서 내용을 커스터마이즈해요.

import { computed, ref, watch } from 'vue'

import type { CascaderOption, CheckboxValueType } from 'element-plus'

const props = { multiple: true }
const checkAll = ref(false)
const indeterminate = ref(false)
const value = ref([])
const options = ref([
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          { value: 'consistency', label: 'Consistency' },
          { value: 'feedback', label: 'Feedback' },
          { value: 'efficiency', label: 'Efficiency' },
          { value: 'controllability', label: 'Controllability' },
        ],
      },
    ],
  },
])

const getAllValuePaths = computed(() => {
  const result: string[][] = []
  const queue: { node: CascaderOption; path: string[] }[] = options.value.map(
    (node) => ({ node, path: [node.value] })
  )

  while (queue.length > 0) {
    const { node, path } = queue.shift()!
    if (node.children?.length) {
      node.children.forEach((child) => {
        queue.push({ node: child, path: [...path, child.value as string] })
      })
    } else {
      result.push(path)
    }
  }
  return result
})

watch(value, (val) => {
  if (val.length === 0) {
    checkAll.value = false
    indeterminate.value = false
  } else if (val.length === getAllValuePaths.value.length) {
    checkAll.value = true
    indeterminate.value = false
  } else {
    indeterminate.value = true
  }
})

const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  value.value = val ? getAllValuePaths.value : []
}

const handleClear = () => {
  value.value = []
}

.cascader-custom-header-footer {
  display: flex;
}

.cascader-custom-header-footer > div {
  flex: 1;
  text-align: center;
}

.cascader-custom-header-footer > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.cascader-custom-header .el-checkbox {
  display: flex;
  height: unset;
}

가상 스크롤 2.14.0

대량의 데이터를 다룰 때 가상 스크롤을 활성화해서 성능을 높일 수 있어요. virtual-scroll을 true로 설정하면 가상 스크롤이 활성화돼요. height로 메뉴 높이, item-size로 노드 높이를 커스터마이즈할 수도 있어요. 기본 높이는 204px, 기본 항목 크기는 34px이에요.

커스텀 제안 너비 2.14.0

제안 패널의 너비(필터링 시)는 기본적으로 매칭된 옵션의 최대 너비로 계산돼요. suggestion-item 슬롯으로 제안 옵션을 커스터마이즈하면 옵션에 표시되는 텍스트가 label 값과 같지 않아 계산 오류가 발생할 수 있어요. 이 경우 fit-input-width 속성으로 너비를 고정할 수 있어요. 값이 number면 너비는 특정 고정 픽셀 값이에요.

TIP fit-input-width 속성은 검색 중 제안 패널의 너비만 제어하며, 기본 cascader 패널에는 영향을 주지 않아요.

import { ref } from 'vue'

const value = ref()

const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          { value: 'consistency', label: 'Consistency' },
          { value: 'feedback', label: 'Feedback' },
          { value: 'efficiency', label: 'Efficiency' },
          { value: 'controllability', label: 'Controllability' },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          { value: 'side nav', label: 'Side Navigation' },
          { value: 'top nav', label: 'Top Navigation' },
        ],
      },
    ],
  },
]

Cascader API

Cascader Attributes

Name	Description	Type	Default
model-value / v-model	바인딩 값	string / number /array	—
options	옵션의 데이터, value와 label의 키는 CascaderProps로 커스터마이즈 가능	array	—
props	구성 옵션, 아래 CascaderProps 표 참고	object	—
size	input의 크기	enum	—
placeholder	input의 placeholder	string	—
disabled	Cascader 비활성화 여부	boolean	—
clearable	선택된 값을 지울 수 있는지 여부	boolean	—
clear-icon 2.11.0	커스텀 클리어 아이콘 컴포넌트	string / object	CircleClose
show-all-levels	입력에서 선택된 값의 모든 레벨을 표시할지 여부	boolean	true
collapse-tags	다중 선택 모드에서 태그를 접을지 여부	boolean	—
collapse-tags-tooltip	collapse-tags 텍스트 위에 마우스를 올리면 모든 선택된 태그를 표시할지 여부. 사용하려면 collapse-tags가 true여야 해요	boolean	false
max-collapse-tags-tooltip-height 2.10.2	collapse-tags tooltip의 최대 높이	string / number	—
separator	옵션 label 구분자	string	' / '
filterable	옵션 검색 가능 여부	boolean	—
filter-method	검색 로직 커스터마이즈, 첫 번째 파라미터는 노드, 두 번째는 키워드이고 매칭 여부를 나타내는 boolean을 반환해야 해요	Function	—
debounce	필터 키워드 입력 시 디바운스 지연(밀리초)	number	300
before-filter	필터링 전 훅 함수, 필터링할 값을 파라미터로 받아요. false를 반환하거나 Promise가 반환된 뒤 거부되면 필터링이 중단돼요	Function	—
popper-class	Cascader 드롭다운과 태그 tooltip의 커스텀 클래스 이름	string	''
popper-style	Cascader 드롭다운과 태그 tooltip의 커스텀 스타일	string / object	—
teleported	cascader 팝업 텔레포트 여부	boolean	true
effect 2.10.5	tooltip 테마, 내장 테마: dark / light	enum / string	light
tag-type	태그 타입	enum	info
tag-effect 2.7.8	태그 효과	enum	light
validate-event	폼 검증 트리거 여부	boolean	true
max-collapse-tags 2.3.10	표시할 최대 태그 수. 사용하려면 collapse-tags가 true여야 해요	number	1
empty-values 2.7.0	컴포넌트의 빈 값, config-provider 참고	array	—
value-on-clear 2.7.0	클리어 반환 값, config-provider 참고	string / number / boolean / Function	—
persistent 2.7.8	드롭다운이 비활성 상태이고 persistent가 false면 드롭다운이 파괴돼요	boolean	true
fallback-placements 2.8.1	Tooltip popper.js의 가능한 위치 목록	array	—
placement 2.8.1	드롭다운의 위치	enum	bottom-start
popper-append-to-body deprecated	popper 메뉴를 body에 추가할지 여부. popper 위치가 잘못되면 이 prop을 false로 설정해볼 수 있어요	boolean	true
show-checked-strategy 2.10.5	다중 선택 모드에서 체크된 노드의 표시 전략. 깔끔하게 하려면 parent를, 모든 항목이 중요하면 child를 사용해요	enum	child
virtual-scroll 2.14.0	대량 데이터를 위한 가상 스크롤 활성화 여부	boolean	false
fit-input-width 2.14.0	제안 패널의 너비를 입력과 같게 할지 여부, 값이 number면 너비가 고정돼요	boolean / number	false
item-size 2.14.0	가상 스크롤의 노드 높이(px)	number	34
height 2.14.0	가상 스크롤의 메뉴 높이(px)	number	204

Cascader Events

Name	Description	Type
change	바인딩 값이 변경될 때 실행돼요	Function
expand-change	확장 옵션이 변경될 때 실행돼요	Function
blur	Cascader가 블러될 때 실행돼요	Function
focus	Cascader가 포커스될 때 실행돼요	Function
clear 2.7.7	clearable Select에서 클리어 아이콘이 클릭될 때 실행돼요	Function
visible-change	드롭다운이 나타나거나 사라질 때 실행돼요	Function
remove-tag	다중 선택 모드에서 태그를 제거할 때 실행돼요	Function

Cascader Slots

Name	Description	Type
default	cascader 노드의 커스텀 내용, 각각 현재 Node 객체와 노드 데이터예요	object
empty	매칭되는 옵션이 없을 때의 내용	—
prefix 2.9.4	Input 접두사 내용	—
suggestion-item 2.9.5	검색 시 제안 항목의 커스텀 내용	object
tag 2.10.3	커스텀 태그 스타일	object
header 2.10.5	드롭다운 상단의 내용	—
footer 2.10.5	드롭다운 하단의 내용	—

Cascader Exposes

Name	Description	Type
getCheckedNodes	현재 선택된 노드의 배열을 가져와요. (leafOnly) 리프 체크 노드만 반환할지 여부, 기본은 false	Function
cascaderPanelRef	cascader 패널 ref	object
togglePopperVisible 2.2.31	popper의 표시 타입 토글	Function
contentRef	cascader 내용 ref	object
presentText 2.8.4	선택된 내용 텍스트	object
focus 2.11.8	input 요소 포커스	Function
blur 2.11.8	input 요소 블러	Function

CascaderPanel API

CascaderPanel Attributes

Name	Description	Type	Default
model-value / v-model	바인딩 값	string/number/array	—
options	옵션의 데이터, value와 label의 키는 CascaderProps로 커스터마이즈 가능	array	—
props	구성 옵션, 아래 CascaderProps 표 참고	object	—
virtual-scroll 2.14.0	대량 데이터를 위한 가상 스크롤 활성화 여부	boolean	false
item-size 2.14.0	가상 스크롤의 노드 높이(px)	number	34
height 2.14.0	가상 스크롤의 메뉴 높이(px)	number	204

CascaderPanel Events

Name	Description	Type
change	바인딩 값이 변경될 때 실행돼요	Function
update:modelValue	바인딩 값이 변경될 때 실행돼요	Function
expand-change	확장 옵션이 변경될 때 실행돼요	Function
close	패널 닫기 이벤트, 패널 접힘 판단을 위해 Cascader에 제공	Function

CascaderPanel Slots

Name	Description	Type
default	cascader 노드의 커스텀 내용, 각각 현재 Node 객체와 노드 데이터예요	object
empty 2.8.3	데이터가 없을 때 패널의 내용	—

CascaderPanel Exposes

Name	Description	Type
getCheckedNodes	현재 선택된 노드의 배열을 가져와요. (leafOnly) 리프 체크 노드만 반환할지 여부, 기본은 false	Function
clearCheckedNodes	체크된 노드 지우기	Function

CascaderProps

Attribute	Description	Type	Default
expandTrigger	옵션 확장 트리거 모드	enum	click
multiple	다중 선택 활성화 여부	boolean	false
checkStrictly	노드의 체크 상태가 부모/자식 노드에 영향을 주지 않는지 여부	boolean	false
emitPath	체크된 노드가 변경될 때 노드 경로 배열을 emit할지 여부. false면 노드의 값만 emit해요	boolean	true
lazy	자식 노드를 동적 로드할지 여부, lazyload 속성과 함께 사용	boolean	false
lazyLoad	자식 노드 데이터 로드 메서드, lazy가 true일 때만 동작. reject 파라미터는 2.11.5부터 지원돼요	Function	—
value	노드 객체의 어느 키를 노드의 값으로 사용할지 지정	string	value
label	노드 객체의 어느 키를 노드의 label로 사용할지 지정	string	label
children	노드 객체의 어느 키를 노드의 children으로 사용할지 지정	string	children
disabled	노드 객체의 어느 키를 노드의 disabled로 사용할지 지정	string	disabled
leaf	노드 객체의 어느 키를 노드의 leaf 필드로 사용할지 지정	string	leaf
hoverThreshold	옵션 확장의 hover 임계값	number	500
checkOnClickNode 2.10.5	노드를 클릭할 때 노드를 체크/해제할지 여부	boolean	false
checkOnClickLeaf 2.10.5	리프 노드(마지막 자식)를 클릭할 때 체크/해제할지 여부	boolean	true
showPrefix 2.10.5	라디오 또는 체크박스 접두사 표시 여부	boolean	true

타입 선언

type CascaderNodeValue = string | number
type CascaderNodePathValue = CascaderNodeValue[]
type CascaderValue =
  | CascaderNodeValue
  | CascaderNodePathValue
  | (CascaderNodeValue | CascaderNodePathValue)[]

type Resolve = (data: any) => void

type ExpandTrigger = 'click' | 'hover'

type LazyLoad = (node: Node, resolve: Resolve, reject: () => void) => void

type isDisabled = (data: CascaderOption, node: Node) => boolean

type isLeaf = (data: CascaderOption, node: Node) => boolean

interface CascaderOption extends Record {
  label?: string
  value?: CascaderNodeValue
  children?: CascaderOption[]
  disabled?: boolean
  leaf?: boolean
}

interface CascaderProps {
  expandTrigger?: ExpandTrigger
  multiple?: boolean
  checkStrictly?: boolean
  emitPath?: boolean
  lazy?: boolean
  lazyLoad?: LazyLoad
  value?: string
  label?: string
  children?: string
  disabled?: string | isDisabled
  leaf?: string | isLeaf
  hoverThreshold?: number
}

class Node {
  readonly uid: number
  readonly level: number
  readonly value: CascaderNodeValue
  readonly label: string
  readonly pathNodes: Node[]
  readonly pathValues: CascaderNodePathValue
  readonly pathLabels: string[]

  childrenData: ChildrenData
  children: Node[]
  text: string
  loaded: boolean
  /**
   * Is it checked
   *
   * @default false
   */
  checked: boolean
  /**
   * Used to indicate the intermediate state of unchecked and fully checked child nodes
   *
   * @default false
   */
  indeterminate: boolean
  /**
   * Loading Status
   *
   * @default false
   */
  loading: boolean

  // getter
  isDisabled: boolean
  isLeaf: boolean
  valueByOption: CascaderNodeValue | CascaderNodePathValue

  // method
  appendChild(childData: CascaderOption): Node
  calcText(allLevels: boolean, separator: string): string
  broadcast(): void
  emit(): void
  onParentCheck(checked: boolean): void
  onChildCheck(): void
  setCheckState(checked: boolean): void
  doCheck(checked: boolean): void
}

Node as CascaderNode

더 알아보기 (Learn more)