Update
This commit is contained in:
91
src/index.js
91
src/index.js
@@ -34,6 +34,11 @@ Component({
|
|||||||
type: Array,
|
type: Array,
|
||||||
value: []
|
value: []
|
||||||
},
|
},
|
||||||
|
// 选择了第n列后,是否将大于n的列的选择值自动初始化为0
|
||||||
|
initColumnSelectedIndex: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -64,6 +69,7 @@ Component({
|
|||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
* 监听源数组更新变化
|
* 监听源数组更新变化
|
||||||
|
*
|
||||||
* @param {Array} newSourceData 源数组,newSourceData有几维,Picker就可以有几阶。
|
* @param {Array} newSourceData 源数组,newSourceData有几维,Picker就可以有几阶。
|
||||||
*/
|
*/
|
||||||
sourceDataChange(newSourceData) {
|
sourceDataChange(newSourceData) {
|
||||||
@@ -112,10 +118,11 @@ Component({
|
|||||||
multiIndex,
|
multiIndex,
|
||||||
multiArray
|
multiArray
|
||||||
})
|
})
|
||||||
console.log(this.data)
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 校验源数组是否正确
|
* 校验源数组是否正确
|
||||||
|
*
|
||||||
* @param {Array} sourceData 源数组
|
* @param {Array} sourceData 源数组
|
||||||
*/
|
*/
|
||||||
checkSourceData(sourceData) {
|
checkSourceData(sourceData) {
|
||||||
@@ -149,23 +156,39 @@ Component({
|
|||||||
handle(sourceData)
|
handle(sourceData)
|
||||||
return { countError }
|
return { countError }
|
||||||
},
|
},
|
||||||
// 点击确定
|
|
||||||
bindMultiPickerChange(e) {
|
/**
|
||||||
|
* 用户点击了确认。
|
||||||
|
*
|
||||||
|
* @param {Object} e 事件对象,具体参考微信小程序api。
|
||||||
|
* @param {Array} e.detail.value 用户选择的下标数组。
|
||||||
|
*/
|
||||||
|
pickerChange(e) {
|
||||||
console.log('picker发送选择改变,携带值为', e.detail.value)
|
console.log('picker发送选择改变,携带值为', e.detail.value)
|
||||||
|
|
||||||
this.setData({
|
this.setData({
|
||||||
multiIndex: e.detail.value
|
multiIndex: e.detail.value
|
||||||
})
|
})
|
||||||
this.UpdateData()
|
this.processData()
|
||||||
},
|
},
|
||||||
// 更新数据
|
|
||||||
UpdateData() {
|
/**
|
||||||
const { shownFieldName, subsetFieldName, otherNeedFieldsName } = this.data
|
* 处理最终数据,将返回给开发者。
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
processData() {
|
||||||
|
const {
|
||||||
|
sourceData,
|
||||||
|
shownFieldName,
|
||||||
|
subsetFieldName,
|
||||||
|
otherNeedFieldsName,
|
||||||
|
multiIndex
|
||||||
|
} = this.data
|
||||||
const selectedArray = []
|
const selectedArray = []
|
||||||
|
|
||||||
const handle = (value = [], columnIndex = 0) => {
|
const handle = (source = [], columnIndex = 0) => {
|
||||||
value.forEach((item, index) => {
|
source.forEach((item, index) => {
|
||||||
if (index === this.data.multiIndex[columnIndex]) {
|
if (index === multiIndex[columnIndex]) {
|
||||||
const selectedItem = {}
|
const selectedItem = {}
|
||||||
selectedItem[shownFieldName] = item[shownFieldName]
|
selectedItem[shownFieldName] = item[shownFieldName]
|
||||||
otherNeedFieldsName.forEach(key => {
|
otherNeedFieldsName.forEach(key => {
|
||||||
@@ -178,28 +201,34 @@ Component({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
handle(this.data.sourceData)
|
handle(sourceData)
|
||||||
|
|
||||||
this.setData({
|
this.setData({
|
||||||
selectedArray
|
selectedArray
|
||||||
})
|
})
|
||||||
|
|
||||||
const detail = {
|
const detail = {
|
||||||
multiIndex: this.data.multiIndex,
|
selectedIndex: this.data.multiIndex,
|
||||||
selectedArray: this.data.selectedArray
|
selectedArray: this.data.selectedArray
|
||||||
}
|
}
|
||||||
this.triggerEvent('change', detail)
|
this.triggerEvent('change', detail)
|
||||||
},
|
},
|
||||||
// 多级联动发生变化
|
|
||||||
bindMultiPickerColumnChange(e) {
|
/**
|
||||||
|
* 用户滚动了某一列。
|
||||||
|
*
|
||||||
|
* @param {Object} e 事件对象,具体参考微信小程序api。
|
||||||
|
*/
|
||||||
|
pickerColumnChange(e) {
|
||||||
const {
|
const {
|
||||||
shownFieldName,
|
shownFieldName,
|
||||||
subsetFieldName,
|
subsetFieldName,
|
||||||
multiArray,
|
multiArray,
|
||||||
multiIndex,
|
|
||||||
sourceData,
|
sourceData,
|
||||||
steps
|
steps,
|
||||||
|
initColumnSelectedIndex
|
||||||
} = this.data
|
} = this.data
|
||||||
|
let { multiIndex } = this.data
|
||||||
const { column, value: changeIndex } = e.detail
|
const { column, value: changeIndex } = e.detail
|
||||||
|
|
||||||
console.log(`修改了Picker的第${column}列(从0开始计算),选中了第${changeIndex}个值(从0开始计算)`)
|
console.log(`修改了Picker的第${column}列(从0开始计算),选中了第${changeIndex}个值(从0开始计算)`)
|
||||||
@@ -207,20 +236,17 @@ Component({
|
|||||||
// multiIndex变化了,所以也要同步更新multiArray
|
// multiIndex变化了,所以也要同步更新multiArray
|
||||||
multiIndex[column] = changeIndex
|
multiIndex[column] = changeIndex
|
||||||
|
|
||||||
// 每次重置之后的index为0,但是有bug,待定
|
if (initColumnSelectedIndex) {
|
||||||
// let _multiIndex = []
|
// 每次重置之后的index为0,但是有bug,待定。 => 经检查,是编辑器的问题,真机上是没有问题的。
|
||||||
// multiIndex.map((item, index) => {
|
const _multiIndex = multiIndex.map((item, index) => {
|
||||||
// if (column >= index) {
|
if (column >= index) {
|
||||||
// _multiIndex.push(item)
|
return item
|
||||||
// }else {
|
} else {
|
||||||
// _multiIndex.push(0)
|
return 0
|
||||||
// }
|
}
|
||||||
// })
|
})
|
||||||
// multiIndex = _multiIndex
|
multiIndex = _multiIndex
|
||||||
|
}
|
||||||
/**
|
|
||||||
* 假设 multiIndex的数据结构为 [1,2,2]; 三阶 this.data.steps = 3
|
|
||||||
*/
|
|
||||||
|
|
||||||
const handle = (source = [], columnIndex = 0) => {
|
const handle = (source = [], columnIndex = 0) => {
|
||||||
// 当前遍历第 columnIndex 列
|
// 当前遍历第 columnIndex 列
|
||||||
@@ -245,16 +271,13 @@ Component({
|
|||||||
multiArray,
|
multiArray,
|
||||||
multiIndex,
|
multiIndex,
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log(this.multiIndex)
|
|
||||||
console.log(this.data)
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
lifetimes: {
|
lifetimes: {
|
||||||
attached() {
|
attached() {
|
||||||
if (this.data.autoSelect) {
|
if (this.data.autoSelect) {
|
||||||
this.UpdateData()
|
this.processData()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user