picker-view写出一个多列选择器

以下是一个使用 `picker-view` 实现的多列选择器示例代码：

<template>
  <view>
    <picker-view :value="selected" @change="onChange">
      <picker-view-column v-for="(option, index) in range" :key="index" :value="selected[index]" :range="option"></picker-view-column>
    </picker-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      range: [
        ['北京', '上海', '广州', '深圳'],
        ['朝阳区', '海淀区', '东城区', '西城区'],
        ['1号线', '2号线', '3号线', '4号线']
      ],
      selected: [0, 0, 0]
    }
  },
  methods: {
    onChange(e) {
      this.selected = e.detail.value
      console.log('选择的值：', this.range[0][this.selected[0]], this.range[1][this.selected[1]], this.range[2][this.selected[2]])
    }
  }
}
</script>

在上面的代码中，`picker-view` 组件包含了多个 `picker-view-column` 组件，每个 `picker-view-column` 组件表示一列选项。`v-for` 循环遍历 `range` 数组，为每个 `picker-view-column` 组件传递对应的选项。`selected` 数组表示每列选项的默认选中值。在 `onChange` 方法中，通过 `e.detail.value` 获取选择器选中的值，然后可以根据这些值做出相应的操作。