uniapp 异步加载级联选择器（Cascader，data-picke）

目录

Props

事件方法

inputChange事件回调参数说明：

completeChange事件回调参数说明：

temList 属性Object参数说明

defaultItemList 属性Object参数说明

在template中使用

由于uniapp uni-ui的data-picke 不支持异步作者自己写了一个 插件市场下载使用

插件市场地址级联数据选择 data-picker 自定义多级选择 多级联动选择、 - DCloud 插件市场

Props

事件方法

inputChange事件回调参数说明：

• layer 当前所属层级
• subIndex 当前层级点击项索引值
• subItem项 当前层级点击项所有数据，由父组件传入的数据

completeChange事件回调参数说明：

• result 当前选择的结果
• text 所有层级选择的text值拼接数据，如：安徽省合肥市庐阳区
• value 最后一级点击项的value值
• subText 最后一级点击项的text值
• src 最后一级点击项的src值

temList 属性Object参数说明

属性 receiveData 数据格式与 itemList中子集数据一致，数据为约定格式，尽量保持一致。

[{
    src: "", //图标地址
    text: "",//主文本
    subText: "",//副文本
    value: 0, //value值 
    children:[{
      text: "",//主文本
      subText: "",//副文本
      value: 0,//value值
      children:[] //子级数据 如果数据长度为0则表示没有下一级数据了
     }] //子级数据
}]

defaultItemList 属性Object参数说明

数据为约定格式，尽量保持一致，当一次性传入所有数据时，默认值可为字符串数组。

[{
    text: "", //选中的text
    subText: '', //选中的subText
    value: '', //选中的value
    src: '', //选中的src，没有则传空或不传
    index: 0, //选中数据在当前layer索引
    list: [{
        src: "",//图标地址
        text: "", //主文本
        subText: "",//副文本
        value: 101 //value值 
     }] //当前layer下所有数据集合
}]

在template中使用

 
<template>
    <view>
        <jia-cascader request :itemList="itemList" :receiveData="receiveData" :defaultItemList="defaultItemList" @completeChange="complete" @inputChange="change"></jia-cascader>
    </view>
</template>
 
<script>
// data 数据 及 方法
export default {
    data() {
        return {
            itemList: [],
            receiveData: [],
            defaultItemList: [
                {
                    src: '',
                    text: '高一(3)班',
                    subText: '30人',
                    value: 102,
                    index: 1, //选中数据在当前layer索引
                    list: [
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(3)班',
                            subText: '30人',
                            value: 103
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        },
                        {
                            src: '',
                            text: '高一(2)班',
                            subText: '30人',
                            value: 102
                        },
                        {
                            src: '',
                            text: '高一(1)班',
                            subText: '30人',
                            value: 101
                        }
                    ] //当前layer下所有数据集合
                },
                {
                    text: '周小小', //选中的text
                    subText: '女', //选中的subText
                    value: 11103, //选中的value
                    src: '', //选中的src，没有则传空或不传
                    index: 2, //选中数据在当前layer索引
                    list: [
                        {
                            text: '张三',
                            subText: '男',
                            value: 11101
                        },
                        {
                            text: '王五',
                            subText: '男',
                            value: 11102
                        },
                        {
                            text: '周小小',
                            subText: '女',
                            value: 11103
                        },
                        {
                            text: '周小小',
                            subText: '女',
                            value: 11103
                        },
                        {
                            text: '周小小',
                            subText: '女',
                            value: 11103
                        }
                    ] //当前layer下所有数据集合
                }
            ]
        };
    },
    onLoad() {
        this.itemList = [
            {
                src: ' ',
                text: '高一(1)班',
                subText: '30人',
                value: 101
            },
            {
                src: ' ',
                text: '高一(2)班',
                subText: '30人',
                value: 102
            },
            {
                src: ' ',
                text: '高一(3)班',
                subText: '30人',
                value: 103
            },
            {
                src: ' ',
                text: '高一(4)班',
                subText: '28人',
                value: 104
            },
            {
                src: ' ',
                text: '高一(5)班',
                subText: '28人',
                value: 105
            },
            {
                src: ' ',
                text: '高一(6)班',
                subText: '28人',
                value: 106
            },
            {
                src: ' ',
                text: '高一(7)班',
                subText: '28人',
                value: 107
            },
            {
                src: ' ',
                text: '高一(8)班',
                subText: '38人',
                value: 108
            },
            {
                src: ' ',
                text: '高一(9)班',
                subText: '38人',
                value: 109
            },
            {
                src: ' ',
                text: '高一(10)班',
                subText: '38人',
                value: 110
            },
            {
                src: ' ',
                text: '高一(11)班',
                subText: '38人',
                value: 111
            },
            {
                src: ' ',
                text: '高一(12)班',
                subText: '38人',
                value: 112
            }
        ];
    },
    methods: {
        change(e) {
            console.log(e);
            /**
         *   layer: 0  第几级 index
             src: '/static/images/basic/color.png'
             subIndex: 2   //当前层级下选中项index
             subText: '30人'  //选中项数据
             text: '高一(3)班'
             value: 103 //选中项value数据
         * */
 
            // 模拟请求
            let value = e.value;
            let layer = e.layer;
            if (layer === 7) {
                //实际中以请求数据为准，无下级数据则传空数组
                this.receiveData = [];
            } else {
                uni.showLoading({
                    title: '请稍候...'
                });
                setTimeout(() => {
                    uni.hideLoading();
                    //请求完成后将数据处理成以下格式，传入，最后一级没有则传空数组
                    switch (layer) {
                        case 0:
                            this.receiveData = [
                                {
                                    text: '张三',
                                    subText: '男',
                                    value: 11101
                                },
                                {
                                    text: '王五',
                                    subText: '男',
                                    value: 11102
                                },
                                {
                                    text: '周小小',
                                    subText: '女',
                                    value: 11103
                                },
                                {
                                    text: '周小小',
                                    subText: '女',
                                    value: 11103
                                },
                                {
                                    text: '周小小',
                                    subText: '女',
                                    value: 11103
                                }
                            ];
                            break;
                        case 1:
                            this.receiveData = [
                                {
                                    text: '他(她)说',
                                    value: 11101
                                }
                            ];
                            break;
                        case 2:
                            this.receiveData = [
                                {
                                    text: '这是一个',
                                    value: 11101
                                }
                            ];
                            break;
                        case 3:
                            this.receiveData = [
                                {
                                    text: '级联选择器',
                                    value: 11101
                                }
                            ];
                            break;
                        case 4:
                            this.receiveData = [
                                {
                                    text: '测试例子',
                                    value: 11101
                                }
                            ];
                            break;
                        case 5:
                            this.receiveData = [
                                {
                                    text: '总共',
                                    value: 11101
                                }
                            ];
                            break;
                        case 6:
                            this.receiveData = [
                                {
                                    text: '8级数据',
                                    value: 11101
                                }
                            ];
                            break;
                        default:
                            break;
                    }
                }, 800);
            }
        },
        complete(e) {
            console.log(e);
            console.log('您选择的数据为：' + e.text);
        }
    }
};
</script>