Sélecteur en cascade

Le sélecteur en cascade s'applique aux données multi-niveaux, par exemple la sélection d'une province, d'une ville et d'un district.

Utilisation de base

vue

<script setup>
import { ref } from 'vue'

const value1 = ref([])
const options1 = [
  {
    value: 'zhinan',
    label: 'Guide',
    children: [
      {
        value: 'sheji',
        label: 'Guide de conception',
        children: [
          { value: 'yuansze', label: 'Couleurs' },
          { value: 'fuziyuanze', label: 'Polices' },
        ],
      },
      {
        value: 'shejiguize',
        label: 'Règles de conception',
      },
    ],
  },
  {
    value: 'zujian',
    label: 'Composants',
    children: [
      { value: 'jiben', label: 'Base' },
      { value: 'fankui', label: 'Retours' },
    ],
  },
]
</script>

<template>
  <!-- Utilisation de base -->
  <lh-cascader v-model="value1" :options="options1" />
</template>

vue

<script>
export default {
  data() {
    return {
      value1: [],
      options1: [
        {
          value: 'zhinan',
          label: 'Guide',
          children: [
            {
              value: 'sheji',
              label: 'Guide de conception',
              children: [
                { value: 'yuansze', label: 'Couleurs' },
                { value: 'fuziyuanze', label: 'Polices' },
              ],
            },
            {
              value: 'shejiguize',
              label: 'Règles de conception',
            },
          ],
        },
        {
          value: 'zujian',
          label: 'Composants',
          children: [
            { value: 'jiben', label: 'Base' },
            { value: 'fankui', label: 'Retours' },
          ],
        },
      ],
    }
  },
}
</script>

<template>
  <!-- Utilisation de base -->
  <lh-cascader v-model="value1" :options="options1" />
</template>

Mode multisélection

Passez en mode multisélection pour pouvoir sélectionner plusieurs résultats.

vue

<script setup>
import { ref } from 'vue'

const value2 = ref([])
const options2 = [
  {
    value: 'zhinan',
    label: 'Guide',
    children: [
      { value: 'sheji', label: 'Guide de conception' },
      { value: 'shejiguize', label: 'Règles de conception' },
    ],
  },
  {
    value: 'zujian',
    label: 'Composants',
    children: [
      { value: 'jiben', label: 'Composants de base' },
      { value: 'fankui', label: 'Composants de retour' },
    ],
  },
]
</script>

<template>
  <!-- Mode multisélection -->
  <lh-cascader v-model="value2" :options="options2" multiple />
</template>

vue

<script>
export default {
  data() {
    return {
      value2: [],
      options2: [
        {
          value: 'zhinan',
          label: 'Guide',
          children: [
            { value: 'sheji', label: 'Guide de conception' },
            { value: 'shejiguize', label: 'Règles de conception' },
          ],
        },
        {
          value: 'zujian',
          label: 'Composants',
          children: [
            { value: 'jiben', label: 'Composants de base' },
            { value: 'fankui', label: 'Composants de retour' },
          ],
        },
      ],
    }
  },
}
</script>

<template>
  <!-- Mode multisélection -->
  <lh-cascader v-model="value2" :options="options2" multiple />
</template>

Option désactivée

Désactivez un nœud au moyen de la propriété disabled.

vue

<script setup>
import { ref } from 'vue'

const value3 = ref([])
const options3 = [
  {
    value: 'zhinan',
    label: 'Guide',
    disabled: true,
    children: [
      { value: 'sheji', label: 'Guide de conception' },
    ],
  },
  {
    value: 'zujian',
    label: 'Composants',
    children: [
      { value: 'jiben', label: 'Composants de base' },
      { value: 'fankui', label: 'Composants de retour', disabled: true },
    ],
  },
]
</script>

<template>
  <!-- Option désactivée -->
  <lh-cascader v-model="value3" :options="options3" />
</template>

vue

<script>
export default {
  data() {
    return {
      value3: [],
      options3: [
        {
          value: 'zhinan',
          label: 'Guide',
          disabled: true,
          children: [
            { value: 'sheji', label: 'Guide de conception' },
          ],
        },
        {
          value: 'zujian',
          label: 'Composants',
          children: [
            { value: 'jiben', label: 'Composants de base' },
            { value: 'fankui', label: 'Composants de retour', disabled: true },
          ],
        },
      ],
    }
  },
}
</script>

<template>
  <!-- Option désactivée -->
  <lh-cascader v-model="value3" :options="options3" />
</template>

Taille, désactivation et lecture seule

Ajustez la taille avec size, désactivez tout le sélecteur avec disabled, affichez en lecture seule avec readonly, personnalisez l'espace réservé avec placeholder, et masquez le bouton d'effacement avec clearable.

vue

<script setup lang="ts">
import { ref } from 'vue'

const demoCascSize = ref([])
const demoCascSize2 = ref([])
const demoCascDisabled = ref([])
const demoCascReadonly = ref([])
const demoCascPlaceholder = ref([])
const demoCascNoClear = ref([])
const options = [
  {
    value: 'zhinan',
    label: 'Guide',
    children: [
      { value: 'sheji', label: 'Guide de conception' },
      { value: 'shejiguize', label: 'Règles de conception' },
    ],
  },
  {
    value: 'zujian',
    label: 'Composants',
    children: [
      { value: 'jiben', label: 'Composants de base' },
      { value: 'fankui', label: 'Composants de retour' },
    ],
  },
]
</script>

<template>
  <!-- small -->
  <lh-cascader v-model="demoCascSize" :options="options" size="small" placeholder="small" />
  <!-- large -->
  <lh-cascader v-model="demoCascSize2" :options="options" size="large" placeholder="large" />
  <!-- État désactivé -->
  <lh-cascader v-model="demoCascDisabled" :options="options" disabled placeholder="État désactivé" />
  <!-- État en lecture seule -->
  <lh-cascader v-model="demoCascReadonly" :options="options" readonly placeholder="État en lecture seule" />
  <!-- Espace réservé personnalisé -->
  <lh-cascader v-model="demoCascPlaceholder" :options="options" placeholder="Espace réservé personnalisé" />
  <!-- Non effaçable -->
  <lh-cascader v-model="demoCascNoClear" :options="options" :clearable="false" placeholder="Non effaçable" />
</template>

vue

<script>
export default {
  data() {
    return {
      demoCascSize: [],
      demoCascSize2: [],
      demoCascDisabled: [],
      demoCascReadonly: [],
      demoCascPlaceholder: [],
      demoCascNoClear: [],
      options: [
        {
          value: 'zhinan',
          label: 'Guide',
          children: [
            { value: 'sheji', label: 'Guide de conception' },
            { value: 'shejiguize', label: 'Règles de conception' },
          ],
        },
        {
          value: 'zujian',
          label: 'Composants',
          children: [
            { value: 'jiben', label: 'Composants de base' },
            { value: 'fankui', label: 'Composants de retour' },
          ],
        },
      ],
    }
  },
}
</script>

<template>
  <!-- small -->
  <lh-cascader v-model="demoCascSize" :options="options" size="small" placeholder="small" />
  <!-- large -->
  <lh-cascader v-model="demoCascSize2" :options="options" size="large" placeholder="large" />
  <!-- État désactivé -->
  <lh-cascader v-model="demoCascDisabled" :options="options" disabled placeholder="État désactivé" />
  <!-- État en lecture seule -->
  <lh-cascader v-model="demoCascReadonly" :options="options" readonly placeholder="État en lecture seule" />
  <!-- Espace réservé personnalisé -->
  <lh-cascader v-model="demoCascPlaceholder" :options="options" placeholder="Espace réservé personnalisé" />
  <!-- Non effaçable -->
  <lh-cascader v-model="demoCascNoClear" :options="options" :clearable="false" placeholder="Non effaçable" />
</template>

Affichage du chemin et recherche

show-all-levels contrôle l'affichage du chemin complet dans le champ de saisie (true par défaut ; une fois désactivé, seul le nom du dernier niveau s'affiche) ;
separator personnalise le séparateur de chemin, également actif dans le panneau des résultats de recherche ;
avec emit-path à false, v-model ne lie que la valeur du nœud du dernier niveau, tandis que le champ affiche toujours le chemin complet ;
check-strictly permet de sélectionner un nœud à n'importe quel niveau (un clic sur un niveau quelconque le sélectionne directement, l'exploration des sous-niveaux reposant sur le survol) ;
filterable active la recherche : la saisie d'un mot-clé affiche les correspondances sous forme de chemin complet ;
collapse-tags replie les étiquettes en mode multisélection ;
cascading désactive la cascade de la coche entre nœuds parents et enfants ;
item-config personnalise les alias des champs de nœuds (par exemple construire l'arbre avec id / name), y compris pour l'affichage du chemin.

Les exemples ci-dessous sont tous pré-remplis avec une valeur sélectionnée, afin de comparer les différences sans avoir à parcourir chaque niveau : chemin complet Zhejiang / Hangzhou / Xihu, uniquement le dernier niveau une fois show-all-levels désactivé, et Zhejiang > Hangzhou > Xihu avec separator=" > ".

Zhejiang/Hangzhou/Xihu

Zhejiang/Hangzhou/Binjiang

vue

<script setup lang="ts">
import { ref } from 'vue'

const demoCascFullPath = ref(['zhejiang', 'hangzhou', 'xihu'])
const demoCascAllLevels = ref(['zhejiang', 'hangzhou', 'xihu'])
const demoCascSep = ref(['zhejiang', 'hangzhou', 'xihu'])
const demoCascEmit = ref(['xihu'])
const demoCascStrict = ref(['zhejiang', 'hangzhou'])
const demoCascFilter = ref([])
const demoCascCollapse = ref(['xihu', 'haishu'])
const demoCascLoose = ref(['xihu', 'binjiang'])
const demoCascItem = ref(['zhejiang', 'hangzhou', 'xihu'])

const pathOptions = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          { value: 'xihu', label: 'Xihu' },
          { value: 'binjiang', label: 'Binjiang' },
        ],
      },
      {
        value: 'ningbo',
        label: 'Ningbo',
        children: [{ value: 'haishu', label: 'Haishu' }],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [{ value: 'xuanwu', label: 'Xuanwu' }],
      },
    ],
  },
]

const aliasedOptions = [
  {
    id: 'zhejiang',
    name: 'Zhejiang',
    sub: [
      {
        id: 'hangzhou',
        name: 'Hangzhou',
        sub: [
          { id: 'xihu', name: 'Xihu' },
          { id: 'binjiang', name: 'Binjiang' },
        ],
      },
      {
        id: 'ningbo',
        name: 'Ningbo',
        sub: [{ id: 'haishu', name: 'Haishu' }],
      },
    ],
  },
]
</script>

<template>
  <!-- Chemin complet (par défaut) -->
  <lh-cascader v-model="demoCascFullPath" :options="pathOptions" placeholder="Chemin complet (par défaut)" />
  <!-- Dernier niveau uniquement -->
  <lh-cascader v-model="demoCascAllLevels" :options="pathOptions" :show-all-levels="false" placeholder="Dernier niveau uniquement" />
  <!-- Séparateur > -->
  <lh-cascader v-model="demoCascSep" :options="pathOptions" separator=" > " placeholder="Séparateur >" />
  <!-- Ne renvoyer que le dernier niveau -->
  <lh-cascader v-model="demoCascEmit" :options="pathOptions" :emit-path="false" placeholder="Ne renvoyer que le dernier niveau" />
  <!-- Tout niveau sélectionnable -->
  <lh-cascader v-model="demoCascStrict" :options="pathOptions" check-strictly placeholder="Tout niveau sélectionnable" />
  <!-- Recherche activée -->
  <lh-cascader v-model="demoCascFilter" :options="pathOptions" filterable placeholder="Recherche activée" />
  <!-- Étiquettes repliées en multisélection -->
  <lh-cascader v-model="demoCascCollapse" :options="pathOptions" multiple collapse-tags placeholder="Étiquettes repliées en multisélection" />
  <!-- Sans cascade parent-enfant -->
  <lh-cascader v-model="demoCascLoose" :options="pathOptions" multiple :cascading="false" placeholder="Sans cascade parent-enfant" />
  <!-- Alias de champs -->
  <lh-cascader v-model="demoCascItem" :options="aliasedOptions" :item-config="{ value: 'id', label: 'name', children: 'sub' }" placeholder="Alias de champs" />
</template>

vue

<script>
export default {
  data() {
    return {
      demoCascFullPath: ['zhejiang', 'hangzhou', 'xihu'],
      demoCascAllLevels: ['zhejiang', 'hangzhou', 'xihu'],
      demoCascSep: ['zhejiang', 'hangzhou', 'xihu'],
      demoCascEmit: ['xihu'],
      demoCascStrict: ['zhejiang', 'hangzhou'],
      demoCascFilter: [],
      demoCascCollapse: ['xihu', 'haishu'],
      demoCascLoose: ['xihu', 'binjiang'],
      demoCascItem: ['zhejiang', 'hangzhou', 'xihu'],
      pathOptions: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                { value: 'xihu', label: 'Xihu' },
                { value: 'binjiang', label: 'Binjiang' },
              ],
            },
            {
              value: 'ningbo',
              label: 'Ningbo',
              children: [{ value: 'haishu', label: 'Haishu' }],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [{ value: 'xuanwu', label: 'Xuanwu' }],
            },
          ],
        },
      ],
      aliasedOptions: [
        {
          id: 'zhejiang',
          name: 'Zhejiang',
          sub: [
            {
              id: 'hangzhou',
              name: 'Hangzhou',
              sub: [
                { id: 'xihu', name: 'Xihu' },
                { id: 'binjiang', name: 'Binjiang' },
              ],
            },
            {
              id: 'ningbo',
              name: 'Ningbo',
              sub: [{ id: 'haishu', name: 'Haishu' }],
            },
          ],
        },
      ],
    }
  },
}
</script>

<template>
  <!-- Chemin complet (par défaut) -->
  <lh-cascader v-model="demoCascFullPath" :options="pathOptions" placeholder="Chemin complet (par défaut)" />
  <!-- Dernier niveau uniquement -->
  <lh-cascader v-model="demoCascAllLevels" :options="pathOptions" :show-all-levels="false" placeholder="Dernier niveau uniquement" />
  <!-- Séparateur > -->
  <lh-cascader v-model="demoCascSep" :options="pathOptions" separator=" > " placeholder="Séparateur >" />
  <!-- Ne renvoyer que le dernier niveau -->
  <lh-cascader v-model="demoCascEmit" :options="pathOptions" :emit-path="false" placeholder="Ne renvoyer que le dernier niveau" />
  <!-- Tout niveau sélectionnable -->
  <lh-cascader v-model="demoCascStrict" :options="pathOptions" check-strictly placeholder="Tout niveau sélectionnable" />
  <!-- Recherche activée -->
  <lh-cascader v-model="demoCascFilter" :options="pathOptions" filterable placeholder="Recherche activée" />
  <!-- Étiquettes repliées en multisélection -->
  <lh-cascader v-model="demoCascCollapse" :options="pathOptions" multiple collapse-tags placeholder="Étiquettes repliées en multisélection" />
  <!-- Sans cascade parent-enfant -->
  <lh-cascader v-model="demoCascLoose" :options="pathOptions" multiple :cascading="false" placeholder="Sans cascade parent-enfant" />
  <!-- Alias de champs -->
  <lh-cascader v-model="demoCascItem" :options="aliasedOptions" :item-config="{ value: 'id', label: 'name', children: 'sub' }" placeholder="Alias de champs" />
</template>

Props

Propriété	Description	Type	Valeur par défaut
modelValue	Valeur liée	`(string \| number)[]`	`() => []`
options	Liste des options	`[LhCascaderNode](#type-LhCascaderNode)`[]	`() => []`
size	Taille	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	Désactivé	`boolean`	`false`
clearable	Effaçable	`boolean`	`true`
placeholder	Espace réservé (à défaut, issu du pack de langue `cascader.placeholder`, en français « Sélectionner »)	`string`	`''`
readonly	Lecture seule	`boolean`	`false`
showAllLevels	Afficher le chemin complet dans le champ de saisie	`boolean`	`true`
checkStrictly	Nœuds de tout niveau sélectionnables	`boolean`	`false`
emitPath	La valeur de retour contient le chemin complet	`boolean`	`true`
multiple	Multisélection	`boolean`	`false`
cascading	Cascade parent-enfant	`boolean`	`true`
separator	Séparateur	`string`	`'/'`
collapseTags	Replier les étiquettes en mode multisélection	`boolean`	`false`
filterable	Recherche activée	`boolean`	`false`
itemConfig	Alias des champs de nœuds	`[LhCascaderItemConfig](#type-LhCascaderItemConfig)`	`() => ({})`
sx	Propriétés de mise en page rapide (par exemple `{ mt: 2, w: '50%' }`), converties en style inline appliqué à l'élément racine du déclencheur (le panneau flottant n'est pas affecté)	`LhSxProps`	—

Events

Événement	Description	Paramètre de rappel
change	Déclenché lorsque la sélection change	`(value: (string \| number)[], path: LhCascaderNode[] \| null)`
update:model-value	Déclenché lorsque la valeur liée change	`value: (string \| number)[]`

Structure de données

Définition du type LhCascaderNode :

interface LhCascaderNode {
  value: string | number
  label: string
  disabled?: boolean
  leaf?: boolean
  children?: LhCascaderNode[]
}

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/cascader/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhCascaderProps

export interface LhCascaderProps {
  modelValue?: (string | number)[]
  options?: LhCascaderNode[]
  size?: LhComponentSize
  disabled?: boolean
  clearable?: boolean
  placeholder?: string
  readonly?: boolean
  showAllLevels?: boolean
  checkStrictly?: boolean
  emitPath?: boolean
  multiple?: boolean
  cascading?: boolean
  separator?: string
  collapseTags?: boolean
  filterable?: boolean
  itemConfig?: LhCascaderItemConfig
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhCascaderItemConfig _{(provient de @lh-ui/share/core/cascader)}

/**
 * Correspondance des champs d'élément dans les props du Cascader
 */
export interface LhCascaderItemConfig {
  value?: string
  label?: string
  children?: string
  disabled?: string
  leaf?: string
}

LhCascaderNode _{(provient de @lh-ui/share/core/cascader)}

/**
 * Nœud du Cascader
 */
export interface LhCascaderNode {
  value: string | number
  label: string
  disabled?: boolean
  leaf?: boolean
  children?: LhCascaderNode[]
}

LhComponentSize _{(provient de @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

Slots

Slot	Description	Contenu par défaut
no-match	Contenu personnalisé du panneau de recherche lorsque le filtre ne renvoie aucune correspondance	Pack de langue `cascader.noMatch` (en français « Aucune donnée correspondante »)

Sélecteur en cascade ​

Utilisation de base ​

Mode multisélection ​

Option désactivée ​

Taille, désactivation et lecture seule ​

Affichage du chemin et recherche ​

Props ​

Events ​

Structure de données ​

Définitions de types ​

Slots ​