Cascader 级联选择

用于多层级关联数据（如省市区行政区划、多级商品分类）逐级选择与路径管理的 Tab 选项卡面板。

---

代码示例

1. 基础用法 (Basic)

使用 v-model 绑定当前选中的路径标识数组，通过 options 传入带有 children 的树状级联数据。

<template>
  <mu-button type="primary" block @click="show = true">选择服务区域</mu-button>

  <mu-cascader
    v-model:show="show"
    v-model="selectedPath"
    title="选择服务区域"
    :options="areaOptions"
    @change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const selectedPath = ref([])
const areaOptions = [
  {
    label: '浙江省',
    value: 'zhejiang',
    children: [
      {
        label: '杭州市',
        value: 'hangzhou',
        children: [
          { label: '西湖区', value: 'xihu' },
          { label: '余杭区', value: 'yuhang' }
        ]
      }
    ]
  }
]

const handleChange = (path) => {
  console.log('选中路径:', path)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	控制级联选择器弹窗显示/隐藏	Boolean	true | false	false
v-model / modelValue	选中的路径节点 value 数组	Array	-	[]
options	树状级联数据源列表	Array	-	[]
title	顶部弹窗标题	String	-	'请选择'
fieldNames	自定义层级字段键名对象	Object	-	{ label: 'label', value: 'value', children: 'children' }

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
update:modelValue / update:value	v-model 双向绑定更新	(value: Array)
change	级联节点选择完成时触发	(selectedPath: Array)
close	弹窗完全动画关闭时触发	-