更新记录

1.0.0.1（2025-12-30） 下载此版本

master

1.0.0（2025-12-30） 下载此版本

master

平台兼容性

uni-app(4.45)

其他

安装

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

组件关联说明

• xf-scss辅助样式;
• xf-ts辅助样式;
• xf-fm-select;
• xf-popup;
• xf-tab;
• xf-icon;

基本用法

• 使用组件代码如下：

<template>
    <view>
        <xf-cascader title="地址1" v-model:valueList="valueList1" :dataList="sectionList1"
            @change="selectorData"></xf-cascader>

        <xf-cascader title="地址2" customClass="b-mt16" v-model:valueList="valueList2" :dataList="sectionList2"
            @change="selectorData"></xf-cascader>
    </view>

</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { CascaderData } from '../../../uni_modules/xf-ts/type/type-common';

    const valueList1 = ref([])
    const valueList2 = ref([2, '210101', '1000'])

    const sectionList1 = ref<Array<CascaderData>>([{
        label: '北京市', value: 1, children: [
            {
                label: '北京市', value: '50'
            }]
    },
    {
        label: '浙江省', value: 2, children: [
            {
                label: '杭州市', value: '210101'
            },
            {
                label: '宁波市', value: '310101',
            },
            {
                label: '温州市', value: '410101'
            },
        ]
    }
    ])

    const sectionList2 = ref<Array<CascaderData>>([{
        label: '北京市', value: 1, children: [
            {
                label: '北京市', value: '50', children: [
                    { label: '东城区', value: '110101' },
                    { label: '西城区', value: '110102' },
                    { label: '朝阳区', value: '110105' }]

            }
        ]
    }, {
        label: '浙江省', value: 2, children: [
            {
                label: '杭州市', value: '210101', children: [
                    { label: '滨江区', value: '1000' },
                    { label: '上城区', value: '1001' },
                    { label: '拱墅区', value: '1002' },
                    { label: '西湖区', value: '1003' },
                    { label: '萧山区', value: '1004' },
                    { label: '余杭区', value: '1005' },
                    { label: '富阳区', value: '1006' },
                    { label: '临安区', value: '1007' },
                    { label: '临平区', value: '1008' },
                    { label: '钱塘区', value: '1009' },
                    { label: '富阳区', value: '1006' },
                    { label: '临安区', value: '1007' },
                    { label: '临平区', value: '1008' },
                    { label: '钱塘区', value: '1009' }
                ]
            },
            {
                label: '宁波市', value: '310101', children: [
                    { label: '海曙区', value: '4000' },
                    { label: '江北区', value: '5000' },
                    { label: '北仑区', value: '6000' }
                ]

            },
            {

                label: '温州市', value: '410101', children: [
                    { label: '鹿城区', value: '7000' },
                    { label: '龙湾区', value: '8000' },
                    { label: '洞头区', value: '9000' }
                ]

            }]
    }])

    const selectorData = (e) => {
        console.log(e)
    }
</script>

API

Props

事件 Emits