注： 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 。

基本用法

const col1Data = [{ text: ‘剧毒’, value: ‘剧毒’}, { text: ‘蚂蚁’, value: ‘蚂蚁’ },
{ text: ‘幽鬼’, value: ‘幽鬼’ }]
export default {
mounted () {
this.picker = this.- createPicker({
title: ‘Picker’,
data: [col1Data],
onSelect: (selectedVal, selectedIndex, selectedText) => {
this.- createDialog({
type: ‘warn’,
content: `Selected Item:
- value: - {selectedVal.join(‘, ‘)}

},
methods: {
showPicker () {
this.picker.show()
}
}
}

data字段接收一个数组，其长度决定了picker的列数。

@click="showMutiPicker">Multi-column Picker

const col1Data = [{ text: ‘剧毒’, value: ‘剧毒’}, { text: ‘蚂蚁’, value: ‘蚂蚁’ },
{ text: ‘幽鬼’, value: ‘幽鬼’ }]
const col2Data = [{ text: ‘输出’, value: ‘输出’ }, { text: ‘控制’, value: ‘控制’ },
{ text: ‘核心’, value: ‘核心’}, { text: ‘爆发’, value: ‘爆发’ }, { text: ‘辅助’, value: ‘辅助’ },
{ text: ‘打野’, value: ‘打野’ }, { text: ‘逃生’, value: ‘逃生’ }, { text: ‘先手’, value: ‘先手’ }]
const col3Data = [{ text: ‘梅肯’, value: ‘梅肯’}, { text: ‘秘法鞋’, value: ‘秘法鞋’ },
{ text: ‘假腿’, value: ‘假腿’ }, { text: ‘飞鞋’, value: ‘飞鞋’ }, { text: ‘辉耀’, value: ‘辉耀’ },
{ text: ‘金箍棒’, value: ‘金箍棒’ }]
export default {
mounted () {
this.mutiPicker = this.- createPicker({
title: ‘Multi-column Picker’,
data: [col1Data, col2Data, col3Data],
onSelect: (selectedVal, selectedIndex, selectedText) => {
this.- createDialog({
type: ‘warn’,
content: `Selected Item:
- value: - {selectedVal.join(‘, ‘)}

• 配置别名

可通过alias属性配置value和text的别名。如，用id代表value，用name代表text。

@click="showAliasPicker">Use Alias

export default {
mounted () {
this.aliasPicker = this.- createPicker({
title: ‘Use Alias’,
data: [[{ id: 1, name: ‘A’ }, { id: 2, name: ‘B’ }, { id: 3, name: ‘C’ }]],
alias: {
value: ‘id’,
text: ‘name’
},
onSelect: (selectedVal, selectedIndex, selectedText) => {
this.- createDialog({
type: ‘warn’,
content: `Selected Item:
- value: - {selectedVal.join(‘, ‘)}

},
methods: {
showAliasPicker() {
this.aliasPicker.show()
}
}
}

• 实例方法 setData

@click="showSetDataPicker">Use SetData

const col1Data = [{ text: ‘剧毒’, value: ‘剧毒’}, { text: ‘蚂蚁’, value: ‘蚂蚁’ },
{ text: ‘幽鬼’, value: ‘幽鬼’ }]
const col2Data = [{ text: ‘梅肯’, value: ‘梅肯’}, { text: ‘秘法鞋’, value: ‘秘法鞋’ },
{ text: ‘假腿’, value: ‘假腿’ }, { text: ‘飞鞋’, value: ‘飞鞋’ }, { text: ‘辉耀’, value: ‘辉耀’ },
{ text: ‘金箍棒’, value: ‘金箍棒’ }]
const col3Data = [{ text: ‘输出’, value: ‘输出’}, { text: ‘控制’, value: ‘控制’ },
{ text: ‘核心’, value: ‘核心’ }, { text: ‘爆发’, value: ‘爆发’}, { text: ‘辅助’, value: ‘辅助’ }]
export default {
mounted () {
this.setDataPicker = this.- createPicker({
title: ‘Use SetData’,
onSelect: (selectedVal, selectedIndex, selectedText) => {
this.- createDialog({
type: ‘warn’,
content: `Selected Item:
- value: - {selectedVal.join(‘, ‘)}

实例方法setData可接受2个参数，都为数组类型。第一个参数为滚轴需要显示的数据，第二个参数为选中值的索引。

通过 subtitle 属性，设置副标题。

@click="showSubtitlePicker">Use subtitle

const col1Data = [{ text: ‘剧毒’, value: ‘剧毒’}, { text: ‘蚂蚁’, value: ‘蚂蚁’ },
{ text: ‘幽鬼’, value: ‘幽鬼’ }]
export default {
mounted () {
this.subtitlePicker = this.- createPicker({
title: ‘Picker’,
subtitle: ‘subtitle’,
data: [col1Data],
onSelect: this.selectHandle,
onCancel: this.cancelHandle
})
},
methods: {
showSubtitlePicker () {
this.subtitlePicker.show()
},
selectHandle(selectedVal, selectedIndex, selectedText) {
this.- createDialog({
type: ‘warn’,
content: ,
icon: ‘cubeic-alert’
}).show()
},
cancelHandle() {
this.- createToast({
type: ‘correct’,
txt: ‘Picker canceled’,
time: 1000
}).show()
}
}
}

• data子配置项
  |参数|说明|类型|默认值|示例
  |——-
  |text|picker每一列展示的文案|String/Number|-|-
  |value|picker每一列展示的每项文案对应的值|String/Number/Boolean|-|-

原文: