vant代码实现van-cell单行显示已有数据点击后从下弹出选择项选择后新数据后显示在前端

以下是一个简单的vant代码实现van-cell单行显示已有数据，点击后从下弹出选择项，选择后新数据后显示在前端的示例：

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

在上面的代码中，我们使用了Vant的van-cell和van-popup组件，以及van-picker组件。当用户点击van-cell时，弹出van-popup，其中包含一个van-picker组件。van-picker的选项列由columns数组定义，每个选项列都有一个默认索引。当用户选择一个新值时，我们使用onConfirm方法更新selectedValue并关闭van-popup。最终，van-cell的标题会显示所选的值