此选择器用于单列，多列，多列联动的选择场景。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
- 通过
show绑定一个布尔值变量，用于控制组件的弹出与收起。 - 都通过传入数组
columns配置选择项。
<template> <view> <u-picker :show="show" :columns="columns"></u-picker> <u-button @click="show = true">打开</u-button> </view> </template> <script> export default { data() { return { show: false, columns: [ ['中国', '美国', '日本'] ], } } } </script>
copy
#多列模式与多列联动
此模式通过传入columns参数，此参数为二维数组，通过change事件完成联动操作。
<template> <u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> </template> <script> export default { data() { return { show: true, columns: [ ['中国', '美国'], ['深圳', '厦门', '上海', '拉萨'] ], columnData: [ ['深圳', '厦门', '上海', '拉萨'], ['得州', '华盛顿', '纽约', '阿拉斯加'] ] } }, methods: { changeHandler(e) { const { columnIndex, value, values, // values为当前变化列的数组内容 index, // 微信小程序无法将picker实例传出来，只能通过ref操作 picker = this.$refs.uPicker } = e // 当第一列值发生变化时，变化第二列(后一列)对应的选项 if (columnIndex === 0) { // picker为选择器this实例，变化第二列对应的选项 picker.setColumnValues(1, this.columnData[index]) } }, // 回调参数为包含columnIndex、value、values confirm(e) { console.log('confirm', e) this.show = false } } } </script>
copy
#加载状态
由于需要多列联动，此模式和上面的"多列模式"基本相同，在加载之前将loading设置为true，数据获取完成之后再置为false即可。
<template> <u-picker :show="show" ref="uPicker" :loading="loading" :columns="columns" @change="changeHandler"></u-picker> </template> <script> export default { data() { return { show: true, loading: false, columns: [ ['中国', '美国'], ['深圳', '厦门', '上海', '拉萨'] ], columnData: [ ['深圳', '厦门', '上海', '拉萨'], ['得州', '华盛顿', '纽约', '阿拉斯加'] ] } }, methods: { changeHandler(e) { const { columnIndex, index, // 微信小程序无法将picker实例传出来，只能通过ref操作 picker = this.$refs.uPicker } = e if (columnIndex === 0) { this.loading = true // 模拟网络请求 uni.$u.sleep(1500).then(() => { picker.setColumnValues(1, this.columnData[index]) this.loading = false }) } } } } </script>
copy
#自定义选项值
参数columns可以传入自定义选项值，可以通过keyName参数控制对应的显示属性。
<template> <u-picker :show="show" :columns="columns" keyName="label"></u-picker> </template> <script> export default { data() { return { show: true, columns: [ [{ label: '雪月夜', // 其他属性值 id: 2021 // ... }, { label: '冷夜雨', id: 804 }] ], } } } </script>
copy
#默认值
此组件的所有模式，都可以设置默认值，通过defaultIndex数组参数配置，数组元素的0表示选中每列的哪个值(从0开始)，下面分别对几种模式进行说明：
注意： defaultIndex数组的长度，必须与列数相同，否则无效。
- 单列模式
如设置defaultIndex为[1]表示默认选中第2个(从0开始)，[5]表示选中第6个。
- 多列模式
如设置defaultIndex为[1, 3]表示第一列默认选中第2个，第二列默认选中第4个。
