uniapp中uview组件库中丰富的Picker 选择器用法

<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>

<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>

<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>

<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>