Skip to content

Commit 5dd2747

Browse files
IceAprilerIceApriler
committed
Update
1 parent 70c9ef5 commit 5dd2747

File tree

3 files changed

+121
-55
lines changed

3 files changed

+121
-55
lines changed

‎src/index.js‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
/* 参考文档: https://github.com/IceApriler/miniprogram-picker */
22

3+
function isExist(field) {
4+
return field !== null && field !== undefined
5+
}
6+
37
Component({
48
/**
59
* 组件的属性列表
@@ -99,53 +103,52 @@ Component({
99103
// 源数组更新，则需要更新multiIndex、multiArray
100104
const multiIndex = []
101105
const multiArray = []
102-
const { countError } = this.checkSourceData(newSourceData)
103-
if (countError > 0) {
104-
console.warn(`miniprogram-picker: 初始化源数组时检测到有${countError}个错误，为了方便排查修改已经为你做出了相关提示，请修改后再试，务必保证数据源的数据结构无误。`)
105-
} else {
106-
const defaultIndex = this.getDefaultIndex(newSourceData)
107-
const handle = (source = [], columnIndex = 0) => {
108-
// 当前遍历Picker的第columnIndex列，
109-
// 当columnIndex = 0时，source表示sourceData，其它则表示子集subset
110-
const _multiArrayColumn0 = []
106+
newSourceData = this.checkSourceData(newSourceData)
111107

112-
source.forEach((item, index) => {
113-
if (columnIndex === 0) {
114-
// newSourceData的第0维要单独处理，最后unshift到multiArray中
115-
_multiArrayColumn0.push(item[shownFieldName])
116-
}
108+
console.warn(newSourceData)
117109

118-
if (item[shownFieldName] && index === (defaultIndex[columnIndex] || 0)) {
119-
// 选中的索引和值，默认取每列的第0个
120-
multiIndex.push(index)
121-
122-
if (columnIndex < steps - 1) {
123-
if (item[subsetFieldName]) {
124-
// 开始处理下一维的数据
125-
const _subsetArr = item[subsetFieldName].map(sub => sub[shownFieldName])
126-
multiArray.push(_subsetArr)
127-
handle(item[subsetFieldName], columnIndex + 1)
128-
}
129-
}
130-
}
131-
})
110+
const defaultIndex = this.getDefaultIndex(newSourceData)
111+
const handle = (source = [], columnIndex = 0) => {
112+
// 当前遍历Picker的第columnIndex列，
113+
// 当columnIndex = 0时，source表示sourceData，其它则表示子集subset
114+
const _multiArrayColumn0 = []
132115

116+
source.forEach((item, index) => {
133117
if (columnIndex === 0) {
134-
multiArray.unshift(_multiArrayColumn0)
118+
// newSourceData的第0维要单独处理，最后unshift到multiArray中
119+
_multiArrayColumn0.push(item[shownFieldName])
135120
}
136-
}
137121

138-
handle(newSourceData)
122+
if (item[shownFieldName] && index === (defaultIndex[columnIndex] || 0)) {
123+
// 选中的索引和值，默认取每列的第0个
124+
multiIndex.push(index)
139125

140-
this.setData({
141-
multiIndex,
142-
multiArray
126+
if (columnIndex < steps - 1) {
127+
if (item[subsetFieldName]) {
128+
// 开始处理下一维的数据
129+
const _subsetArr = item[subsetFieldName].map(sub => sub[shownFieldName])
130+
multiArray.push(_subsetArr)
131+
handle(item[subsetFieldName], columnIndex + 1)
132+
}
133+
}
134+
}
143135
})
144136

145-
if (this.data.autoSelect) {
146-
this.processData()
137+
if (columnIndex === 0) {
138+
multiArray.unshift(_multiArrayColumn0)
147139
}
148140
}
141+
142+
handle(newSourceData)
143+
144+
this.setData({
145+
multiIndex,
146+
multiArray
147+
})
148+
149+
if (this.data.autoSelect) {
150+
this.processData()
151+
}
149152
},
150153
/**
151154
* 获取默认值index
@@ -213,34 +216,33 @@ Component({
213216
*/
214217
checkSourceData(sourceData) {
215218
const { shownFieldName, subsetFieldName, steps } = this.data
216-
let countError = 0
217219
const handle = (source = [], columnIndex = 0) => {
218220
// 当前遍历Picker的第columnIndex列，
219221
// 当columnIndex = 0时，source表示sourceData，其它则表示子集subset
220-
221-
source.forEach((item) => {
222-
if (!item[shownFieldName]) {
223-
countError++
222+
if (!source.length) {
223+
const temp = {}
224+
temp[shownFieldName] = ''
225+
temp[subsetFieldName] = []
226+
source.push(temp)
227+
}
228+
return source.map((item) => {
229+
if (!isExist(item[shownFieldName])) {
224230
this.consoleError(item, new Error(`源数组第${columnIndex}维(从0开始计算)的对象中缺少"${shownFieldName}"字段`))
231+
item[shownFieldName] = ''
225232
}
226233

227-
if (item[shownFieldName]) {
228-
// 有shownFieldName字段才会去遍历subsetFieldName字段
229-
if (columnIndex < steps - 1) {
230-
if (item[subsetFieldName]) {
231-
// 开始处理下一维的数据
232-
handle(item[subsetFieldName], columnIndex + 1)
233-
} else {
234-
countError++
235-
this.consoleError(item, new Error(`源数组第${columnIndex}维(从0开始计算)的对象中缺少"${subsetFieldName}"字段`))
236-
}
234+
// 有shownFieldName字段才会去遍历subsetFieldName字段
235+
if (columnIndex < steps - 1) {
236+
if (!isExist(item[subsetFieldName])) {
237+
this.consoleError(item, new Error(`源数组第${columnIndex}维(从0开始计算)的对象中缺少"${subsetFieldName}"字段`))
237238
}
239+
// 开始处理下一维的数据
240+
item[subsetFieldName] = handle(item[subsetFieldName], columnIndex + 1)
238241
}
242+
return item
239243
})
240244
}
241-
242-
handle(sourceData)
243-
return { countError }
245+
return handle(sourceData)
244246
},
245247

246248
/**

‎tools/demo/pages/index/index.js‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Page({
55
data: {
66
result_1: [],
77
result_2: [],
8+
result_3: [],
89
sourceData_1: [
910
{
1011
id: 'id-1',
@@ -54,7 +55,53 @@ Page({
5455
sourceData_2: [
5556
{ name: '河北', code: '0311', nextLevel: [{ name: '石家庄', code: '031101' }, { name: '保定', code: '031102' }]},
5657
{ name: '北京', code: '0110', nextLevel: [{ name: '朝阳', code: '011001' }, { name: '海淀', code: '011002' }]},
57-
]
58+
],
59+
sourceData_3: [{
60+
id: '6cb8bd37-f8ae-4a6b-a236-3bab1b65cd8d',
61+
parentId: '0',
62+
name: '整形',
63+
sonValue: [{
64+
id: 'd4b6d3af-2edb-44a5-9851-c8964cf10d2c',
65+
parentId: '6cb8bd37-f8ae-4a6b-a236-3bab1b65cd8d',
66+
name: '眼部整形',
67+
sonValue: [{
68+
id: 'e531e96f-a081-40a7-a133-091be46983a2',
69+
parentId: 'd4b6d3af-2edb-44a5-9851-c8964cf10d2c',
70+
name: '双眼皮',
71+
sonValue: []
72+
}]
73+
}, {
74+
id: '403d93d3-5302-4682-a988-6dbfbe7ff563',
75+
parentId: '6cb8bd37-f8ae-4a6b-a236-3bab1b65cd8d',
76+
name: '胸部整形',
77+
sonValue: [{
78+
id: '46afdd93-c830-4d0d-bd5d-c0751a0c087a',
79+
parentId: '403d93d3-5302-4682-a988-6dbfbe7ff563',
80+
name: '丰胸',
81+
sonValue: [{
82+
id: '127a3cda-cd91-48b5-997c-6d56a4a02e80',
83+
parentId: '46afdd93-c830-4d0d-bd5d-c0751a0c087a',
84+
name: '自体脂肪丰胸',
85+
sonValue: []
86+
}]
87+
}]
88+
}]
89+
}, {
90+
id: 'a4f22a1a-0c49-46cd-bb1f-ca551b1e01cb',
91+
parentId: '0',
92+
name: '皮肤',
93+
sonValue: [{
94+
id: 'dfa5137c-616b-403c-a552-164e05518072',
95+
parentId: 'a4f22a1a-0c49-46cd-bb1f-ca551b1e01cb',
96+
name: '脱毛美容',
97+
sonValue: []
98+
}, {
99+
id: 'bfd1eb85-93c1-489e-acba-ac3e783c83f0',
100+
parentId: 'a4f22a1a-0c49-46cd-bb1f-ca551b1e01cb',
101+
name: '艺术纹绣',
102+
sonValue: []
103+
}]
104+
}]
58105
},
59106
/**
60107
* Picker用户点击确认时触发
@@ -69,6 +116,7 @@ Page({
69116
const list = {
70117
picker_1: 'result_1',
71118
picker_2: 'result_2',
119+
picker_3: 'result_3',
72120
}
73121
console.log('多级联动结果:', selectedIndex, selectedArray)
74122
const change = {}

‎tools/demo/pages/index/index.wxml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,20 @@
5050
<view class="picker">
5151
当前选择：<view wx:for="{{result_2}}" wx:key="index">{{item['name']}}</view>
5252
</view>
53+
</comp>
54+
55+
<comp
56+
sourceData="{{sourceData_3}}"
57+
steps="{{4}}"
58+
shownFieldName="{{'name'}}"
59+
subsetFieldName="{{'sonValue'}}"
60+
otherNeedFieldsName="{{['id']}}"
61+
initColumnSelectedIndex
62+
bindchange="pickerChange"
63+
bindcancel="pickerCancel"
64+
bindcolumnchange="pickerColumnchange"
65+
data-picker="picker_3">
66+
<view class="picker">
67+
当前选择：<view wx:for="{{result_3}}" wx:key="index">{{item['name']}}</view>
68+
</view>
5369
</comp>

0 commit comments

Comments
 (0)