更新记录

1.0.0.6（2026-01-06） 下载此版本

master

1.0.0.5（2026-01-06） 下载此版本

master

1.0.0.4（2026-01-06） 下载此版本

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-multiple-cascader uni_modules版本的即可，无需import

组件关联说明

• xf-half-checkbox;
• xf-icon;
• xf-popup;
• xf-page;
• xf-fm-multi-select;

代码演示

基本用法

• 使用组件代码如下：

不在表单使用时，自定义插槽

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <view style="width: 100%;">
            <xf-multiple-cascader required pickerTitle="级联选择" v-model:show="show" v-model:modelValue="model1" :isRelationship="false"
                :apiFn="getTreeData">
                <xf-fm-select title="标题" @click="show = true" v-model:value="formValueText"> </xf-fm-select>
            </xf-multiple-cascader>
        </view>
    </scroll-view>
</template>

基础用法，主要用于表单

<template>
    <scroll-view class="xf-col-center" scroll-y>
        <h3>级联组件-父子不联动</h3>
        <view style="width: 100%;">
            <xf-multiple-cascader required pickerTitle="级联选择" v-model:modelValue="model1" :pickerTip="prompt" :isRelationship="false"
                :apiFn="getTreeData"></xf-multiple-cascader>
        </view>

        <h3>级联组件-父子联动</h3>
        <view style="width: 100%;">
            <xf-multiple-cascader required isRelationship :isLeaf="true" pickerTitle="级联选择" v-model:modelValue="model2" :pickerTip="prompt" :isRelationship="false"
                :apiFn="getTreeData"></xf-multiple-cascader>
        </view>

        <view style="width: 100%;">
            <xf-multiple-cascader required isRelationship pickerTitle="级联选择" v-model:modelValue="model3" :pickerTip="prompt" :isRelationship="false"
                :apiFn="getTreeData"></xf-multiple-cascader>
        </view>

    </scroll-view>
</template>

<script setup lang="ts">
    import { onMounted, ref, watch } from 'vue';

    const show = ref(false)

    const prompt = ref("提示内容")
    const model1 = ref([{
        children : [],
        fullName:"fffff",
        value:4
    }])
    const model2 = ref()
    const model3 = ref()

    /**
     * 模拟创建一个接口数据
     */

    const getTreeData = () => {
        return new Promise((resolve) => {
            setTimeout(() => {
                let list = {
                    list: singleLists.value
                }
                resolve(list)
            }, 600)
        })
    }

    const singleLists = ref([
        {
            label: 'xxxx',
            value: 1,
            children: [
                {

                    label: '好多好多字好多好多字', value: 1000,
                    children: [
                        { label: '好多好多字好多好多字', value: 10001, },
                        { label: '我的生活', value: 10002, },
                        { label: 'xxxx', value: 10003, }
                    ]
                },
                { label: '我的生活', value: 1001, },
                { label: 'xxxx', value: 1002, }
            ]
        },
        {
            label: '好多好多字好多好多字好多好多字好多好多字好多好多字',
            value: 2
        },
        {
            label: 'sssss',
            value: 3
        },
        {
            label: 'fffff',
            value: 4
        },
        {
            label: 'sdfadfsdf',
            value: 5
        },
        {
            label: 'fsdfsdf',
            value: 6
        },
        {
            label: 'sfadfsf',
            value: 7
        },
    ]);
</script>

API

Props

事件 Emits

插槽 slot