Cascader カスケード選択

複数レベルのデータセレクターで、段階的に展開して選択します。

コード例

地域を選択

カスケード選択

ボタンをクリックしてカスケードセレクターを開きます。各レベルを選択すると finish イベントが発生します。

<m-button size="mini" type="primary" @click="showCascader = true">地域を選択</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

プロパティ

属性	说明	类型	默认值
options	カスケードデータ（JSON 文字列）	string (json)	[]
value	現在の選択値配列（JSON）	string (json)	[]
show	表示するかどうか	boolean	false
title	タイトル	string	-
field-names	カスタムフィールド名マッピング（JSON）	string (json)	-

イベント

属性	说明	类型	默认值
change	各レベル選択の変化	{ value, selectedOptions }	-
finish	リーフノードが選択された	{ value, selectedOptions }	-
close	セレクターを閉じる	-	-