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	关闭选择器	-	-