uniapp 异步加载级联选择器(Cascader,data-picke)

news/2024/9/25 16:04:26/

 

目录

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: "", //选中的textsubText: '', //选中的subTextvalue: '', //选中的valuesrc: '', //选中的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: '周小小', //选中的textsubText: '女', //选中的subTextvalue: 11103, //选中的valuesrc: '', //选中的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  第几级 indexsrc: '/static/images/basic/color.png'subIndex: 2   //当前层级下选中项indexsubText: '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.ppmy.cn/news/1450764.html

相关文章

存在矛盾的题目

{ u t t − a 2 u x x 0 , t > 0 , x > 0 , u ( x , 0 ) sin ⁡ ( x ) 2 x , x ≥ 0 , u t ( x , 0 ) cos ⁡ ( x ) , x ≥ 0 , u x ( 0 , t ) 2 , t ≥ 0. \begin{cases} u_{tt} - a^2 u_{xx} 0, & t > 0, x > 0, \\ u(x, 0) \sin(x) 2x, & x \ge…

ThreeJS:坐标辅助器与轨道控制器

ThreeJS与右手坐标系 使用ThreeJS创建3D场景时&#xff0c;需要使用一个坐标系来定位和控制对象的位置和方向。 ThreeJS使用的坐标系是右手坐标系&#xff0c;即&#xff1a;X轴向右、Y轴向上、Z轴向前&#xff0c;如下图所示&#xff0c; ThreeJS-右手坐标系 Tips&#xff1a;…

【linux运维】vim基础应用

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了学习基本的shell编程和linux命令&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于b站大学——linux运维课程进行的&#xff0c;…

软件杯 深度学习的动物识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

SQL 基础 | AS 的用法介绍

SQL&#xff08;Structured Query Language&#xff09;是一种用于管理和操作数据库的标准编程语言。 在SQL中&#xff0c;AS关键字有几种不同的用法&#xff0c;主要用于重命名表、列或者查询结果。 以下是AS的一些常见用法&#xff1a; 重命名列&#xff1a;在SELECT语句中&a…

程序设计:C语言 UNIX/LINUX 环境变量替换

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 很多时候程序希望对配置参数做…

JavaEE 初阶篇-深入了解 Junit 单元测试框架和 Java 中的反射机制(使用反射做一个简易版框架)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Junit 单元测试框架概述 1.1 使用 Junit 框架进行测试业务代码 1.2 Junit 单元测试框架的常用注解&#xff08;Junit 4.xxx 版本&#xff09; 2.0 反射概述 2.1 获…

Docker 中安装单体架构 Redis 的 Shell 脚本

该脚本用于实现 root 用户在 Linux 操作系统下的 Docker 中安装单体架构 Redis Shell 脚本 Git 仓库地址 Gitee&#xff1a;https://gitee.com/tongchaowei/common-shell/tree/main/root 执行脚本 bash ./docker-redis-install-single.sh需要注意的 该脚本会先检查是否安…