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

本文主要是介绍uniapp 异步加载级联选择器（Cascader，data-picke），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

目录

Props

事件方法

inputChange事件回调参数说明：

completeChange事件回调参数说明：

temList 属性Object参数说明

defaultItemList 属性Object参数说明

在template中使用

---

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

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

 

Props

属性名	类型	说明	默认值
readonly	Boolean	只读 ｜false
border	Boolean	边框 ｜ true
clearIcon	Boolean	清除按钮 ｜ true
placeholder	String	默认提示 ｜请选择
popupTitle	String	弹窗标题 ｜请选择
itemList	Array	级联数据， 如果下一级是请求返回，则为第一级数据，否则为所有数据	[ ]
defaultItemList	Array	初始化默认选中数据，当一次性传入所有数据时，默认值可为字符串数组，如：['安徽省','阜阳市','颍上县']	[ ]
defaultKey	V1.7.2+ String	默认值字段key，可传值：text，value，仅当一次性传入所有数据时有效	text
headerLine	Boolean	是否显示header底部细线	true
headerBgColor	String	header背景颜色	#FFFFFF
tabsHeight	String	顶部标签栏高度	88rpx
text	String	默认显示文字	请选择
size	Number	tabs 文字大小	28
color	String	tabs 文字颜色	#555
activeColor	String	选中颜色	#5677fc
bold	Boolean	选中后文字加粗	true
showLine	Boolean	选中后是否显示底部线条	true
lineColor	String	线条颜色	#5677fc
checkMarkSize	Number	icon 大小	15
checkMarkColor	String	icon 颜色	#5677fc
imgWidth	String	item 图片宽度	40rpx
imgHeight	String	item 图片高度	40rpx
radius	String	图片圆角	50%
textColor	String	item text颜色	#333
textActiveColor	String	item text选中后颜色	#333
textBold	Boolean	选中后字体是否加粗	true
textSize	Number	item text字体大小	28
nowrap	Boolean	text 是否不换行	false
subTextColor	String	item subText颜色	#999
subTextSize	Number	item subText字体大小	24
padding	String	item padding	20rpx 30rpx
firstItemTop	String	占位高度，第一条数据距离顶部距离	20rpx
height	String	swiper 高度	300px
backgroundColor	String	item swiper 内容部分背景颜色	#FFFFFF
request	Boolean	子级数据是否请求返回（默认false，一次性返回所有数据）	false
receiveData	Array	子级数据（当有改变时，默认为当前选中项新增子级数据，request为true时生效）	[ ]
reset	[Number, String]	改变reset值则重置所有数据

事件方法

属性	类型	说明	返回值
popupopened	Events	弹框打开时触发
popupclosed	Events	弹框关闭时触发
completeChange	Events	选择器中item项点击时触发
inputChange	Events	选择结果数据

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>

这篇关于uniapp 异步加载级联选择器（Cascader，data-picke）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---