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）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！