Update demo
This commit is contained in:
@@ -3,12 +3,9 @@ Page({
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
result: [],
|
||||
steps: 3,
|
||||
name: 'name',
|
||||
subset: 'sonValue',
|
||||
otherFields: ['id', 'city'],
|
||||
originMultiArray: [
|
||||
result_1: [],
|
||||
result_2: [],
|
||||
sourceData_1: [
|
||||
{
|
||||
id: '01',
|
||||
name: '1',
|
||||
@@ -77,6 +74,10 @@ Page({
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
sourceData_2: [
|
||||
{ name: '河北', code: '0311', nextLevel: [{ name: '石家庄', code: '031101' }, { name: '保定', code: '031102' }]},
|
||||
{ name: '北京', code: '0110', nextLevel: [{ name: '朝阳', code: '011001' }, { name: '海淀', code: '011002' }]},
|
||||
]
|
||||
},
|
||||
/**
|
||||
@@ -85,11 +86,24 @@ Page({
|
||||
* @param {Object} e.detail.selectedIndex 用户选择的数据在数组中所在的下标
|
||||
* @param {Object} e.detail.selectedArray 用户选择的数据
|
||||
*/
|
||||
pickerChange(e) {
|
||||
pickerChange_1(e) {
|
||||
const { selectedIndex, selectedArray } = e.detail
|
||||
console.log('多级联动结果:', selectedIndex, selectedArray)
|
||||
this.setData({
|
||||
result: selectedArray
|
||||
result_1: selectedArray
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Picker的确认回调函数
|
||||
*
|
||||
* @param {Object} e.detail.selectedIndex 用户选择的数据在数组中所在的下标
|
||||
* @param {Object} e.detail.selectedArray 用户选择的数据
|
||||
*/
|
||||
pickerChange_2(e) {
|
||||
const { selectedIndex, selectedArray } = e.detail
|
||||
console.log('多级联动结果:', selectedIndex, selectedArray)
|
||||
this.setData({
|
||||
result_2: selectedArray
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -1,7 +1,7 @@
|
||||
<!-- 多级联动 -->
|
||||
<!--
|
||||
sourceData: 源数组,格式必须为数组和对象的集合,参考示例
|
||||
steps: 多级联动的阶数,默认为0
|
||||
steps: 多级联动的阶数,默认为1
|
||||
shownFieldName: 多级联动展示数据的字段名称,默认为name
|
||||
subsetFieldName: 多级联动的子节点的字段名称,默认为subset
|
||||
otherNeedFieldsName: 若需要额外返回其他字段的数据,可以设置otherFields为数组,参考示例
|
||||
@@ -13,17 +13,33 @@
|
||||
bindchange: 回调函数,参考示例
|
||||
-->
|
||||
<comp
|
||||
sourceData="{{originMultiArray}}"
|
||||
steps="{{steps}}"
|
||||
shownFieldName="{{name}}"
|
||||
subsetFieldName="{{subset}}"
|
||||
otherNeedFieldsName="{{otherFields}}"
|
||||
sourceData="{{sourceData_1}}"
|
||||
steps="{{3}}"
|
||||
shownFieldName="{{'name'}}"
|
||||
subsetFieldName="{{'sonValue'}}"
|
||||
otherNeedFieldsName="{{['id', 'other']}}"
|
||||
defaultValue="{{[{name: '2'}, {name: '2.2'}, {name: '2.2.1'}]}}"
|
||||
defaultValueUniqueField="{{'name'}}"
|
||||
autoSelect="{{true}}"
|
||||
initColumnSelectedIndex
|
||||
bindchange="pickerChange">
|
||||
bindchange="pickerChange_1">
|
||||
<view class="picker">
|
||||
当前选择:<text wx:for="{{result}}" wx:key="index">{{item[name]}},</text>
|
||||
当前选择:<view wx:for="{{result_1}}" wx:key="index">{{item['name']}}</view>
|
||||
</view>
|
||||
</comp>
|
||||
|
||||
<comp
|
||||
sourceData="{{sourceData_2}}"
|
||||
steps="{{2}}"
|
||||
shownFieldName="{{'name'}}"
|
||||
subsetFieldName="{{'nextLevel'}}"
|
||||
otherNeedFieldsName="{{['code']}}"
|
||||
defaultValue="{{[{code: '0110'}, {code: '011002'}]}}"
|
||||
defaultValueUniqueField="{{'code'}}"
|
||||
autoSelect="{{true}}"
|
||||
initColumnSelectedIndex
|
||||
bindchange="pickerChange_2">
|
||||
<view class="picker">
|
||||
当前选择:<view wx:for="{{result_2}}" wx:key="index">{{item['name']}}</view>
|
||||
</view>
|
||||
</comp>
|
||||
@@ -0,0 +1,15 @@
|
||||
.picker {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 10rpx 0;
|
||||
padding: 10rpx 0;
|
||||
background-color: #DEECE2;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.picker view {
|
||||
padding: 2rpx 10rpx;
|
||||
margin-left: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
border-bottom: 2rpx solid aqua;
|
||||
}
|
||||
Reference in New Issue
Block a user