Cascader 级联选择

type : 'cascader'

用于多层级联选择

代码演示

基础用法

<template>
    <x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
});
const formOptions = ref([
    {
        type: 'cascader',
        label: 'cascader1',
        name: 'cascader1',
        placeholder: '请输入内容',
        required: true,
        attrs: {
            'columns-num': 3
        },
        options: [
            {
                label: '浙江省',
                value: '330000',
                children: [{ label: '杭州市', value: '330100', }],
            },
            {
                label: '江苏省',
                value: '320000',
                children: [{ label: '南京市', value: '320100' }],
            },
        ]
    },
]);
</script>
<style lang="scss" scoped></style>

基础用法

响应式数据

::component 响应式数据 form-cascader2 :::

异步请求

目前暂不支持异步请求，如需使用，具体可关注后续版本更新

API

Props

与官方组件 Cascader 级联选择 参数保持一致，这里以展示新增属性配置为主，具体配置参见官方文档。

Events