Cascader

Multi-level data selector that expands level by level.

Examples

Select Region

Cascader

Click the button to open the cascader. After selecting each level, the finish event is triggered.

<m-button size="mini" type="primary" @click="showCascader = true">Select Region</m-button>
<div v-if="cascaderResult">{{ cascaderResult }}</div>

<m-cascader
  :show="showCascader"
  title="Select Region"
  :options="cascaderOptions"
  @finish="onCascaderFinish"
  @close="showCascader = false"
/>

import { ref } from 'vue'

const showCascader = ref(false)
const cascaderResult = ref('')

const cascaderOptions = JSON.stringify([
  {
    text: 'California', value: 'ca',
    children: [
      {
        text: 'San Francisco', value: 'sf',
        children: [
          { text: 'Downtown', value: 'dt' },
          { text: 'Mission', value: 'ms' },
        ],
      },
      {
        text: 'Los Angeles', value: 'la',
        children: [
          { text: 'Hollywood', value: 'hw' },
          { text: 'Venice', value: 'vc' },
        ],
      },
    ],
  },
  {
    text: 'New York', value: 'ny',
    children: [
      {
        text: 'NYC', value: 'nyc',
        children: [
          { text: 'Manhattan', value: 'mh' },
          { text: 'Brooklyn', value: 'bk' },
        ],
      },
    ],
  },
])

function onCascaderFinish(e) {
  const opts = e.detail?.selectedOptions ?? []
  cascaderResult.value = opts.map(o => o.text).join(' > ')
  showCascader.value = false
}

API

Props

属性	说明	类型	默认值
options	Cascading data (JSON string)	string (json)	[]
value	Current selected value array (JSON)	string (json)	[]
show	Whether to show	boolean	false
title	Title text	string	-
field-names	Custom field name mapping (JSON)	string (json)	-

Events

属性	说明	类型	默认值
change	Triggered on each level selection change	{ value, selectedOptions }	-
finish	Triggered when leaf node is selected	{ value, selectedOptions }	-
close	Close the selector	-	-