Vant 实现单行显示数据，点击弹出选择项 - 代码示例

<template>
  <div>
    <van-cell
      :title="selectedValue || '请选择'" 
      @click="showPicker = true" 
      center
    ></van-cell>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        :columns="columns" 
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showPicker: false,
      selectedValue: '',
      columns: [
        {
          values: ['选项1', '选项2', '选项3'],
          defaultIndex: 0,
        },
      ],
    }
  },
  methods: {
    onConfirm(selectedValues) {
      this.selectedValue = selectedValues[0]
      this.showPicker = false
    },
  },
}
</script>
<p>在上面的代码中，我们使用了 Vant 的 'van-cell' 和 'van-popup' 组件，以及 'van-picker' 组件。当用户点击 'van-cell' 时，弹出 'van-popup'，其中包含一个 'van-picker' 组件。'van-picker' 的选项列由 'columns' 数组定义，每个选项列都有一个默认索引。当用户选择一个新值时，我们使用 'onConfirm' 方法更新 'selectedValue' 并关闭 'van-popup'。最终，'van-cell' 的标题会显示所选的值。</p>