Cascader 级联选择

提示

如果不需要通过接口获取数据建议使用 AntDesignVue 中的自带的 Cascader 组件

代码演示

基础用法

<template>
    <x-cascader
        v-model="selectedKeys"
        :level="3"
        :load-data="getOptions">
    </x-cascader>
</template>

<script setup>
import { ref } from 'vue'
import apis from '@/apis'

const selectedKeys = ref([])

async function getOptions() {
    return await apis.common.getOptions()
}
</script>

<style lang="less" scoped></style>

高级用法

<template>
    <x-cascader
        v-model="selectedKeys"
        :level="3"
        :load-data="[getOptions, getOptions, getOptions]">
    </x-cascader>
</template>

<script setup>
import { ref } from 'vue'
import apis from '@/apis'

const selectedKeys = ref([])

async function getOptions() {
    return await apis.common.getOptions()
}
</script>

<style lang="less" scoped></style>

API

Props

参数	说明	类型	默认值
model-value(v-model)	内容	array	[]
load-data	加载数据	function、array	-
level	最大层级，loadData 为 function 类型时可以用它来控制数据的最深层级；loadData 为 array 类型时，通过数组长度自动计算最多层级	number	1
field-names	自定义 options 中 label value children 的字段	object	{ label: 'label', value: 'value', children: 'children' }

Events

事件名	说明	回调参数
change	选中项变化时触发	{value, selectedOptions}