目录
由于uniapp uni-ui的data-picke 不支持异步作者自己写了一个 插件市场下载使用
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: "", //选中的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>