Cascader 级联选择器

基本用法

级联选择器。

控制台

[
  "residents",
  "building_a"
]

查看代码

<template>
	<demo-container class="gov-demo-cascader">
		<gov-cascader v-model="values" :options="options" />
		<template #console>
			{{ values }}
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
import options from "./data.js";

const values = ref(["residents", "building_a"]);
</script>

仅显示最后一级

属性 show-all-levels 定义了是否显示完整的路径，将其赋值为false则仅显示最后一级。

控制台

[
  "zujian",
  "form",
  "input-number"
]

查看代码

<template>
	<demo-container class="gov-demo-cascader">
		<gov-cascader
			v-model="values"
			:options="options"
			:showAllLevels="false"
		/>
		<template #console>
			{{ values }}
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
import options from "./data.js";

const values = ref(["zujian", "form", "input-number"]);
</script>

Attributes

属性名	说明	类型	可选值	默认值
modelValue	绑定的值，用于控制选中的级联菜单项	Array	—	[]
options	级联菜单的数据选项	Array	—	[]
size	输入框尺寸	String	—	—
placeholder	占位符	String	—	"请输入"
disabled	是否禁用	Boolean	true, false	false
clear	是否显示清空按钮	Boolean	true, false	true
showAllLevels	是否显示完整的路径	Boolean	true, false	true
triggerForm	是否触发表单验证	Boolean	true, false	true

Events

事件名	说明	回调参数
change	选中项变化时触发	选中项的值数组
focus	输入框获得焦点时触发	—
blur	输入框失去焦点时触发	—
clear	清空按钮点击时触发	—
update:modelValue	绑定值更新时触发	选中项的值数组