移动端使用vant组件踩坑记录_vant columns-type-CSDN博客

本文链接：https://blog.csdn.net/wangyalong4/article/details/134317349

文章讲述了在从Vue3.x升级到4.x的过程中，关于Picker组件columns绑定值的调整，包括字段类型不一致、默认选中项写法的变化以及v-model的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Picker 选择器columns 绑定值的问题，4.x和3.xcolumn结构中的字段类型不一致，当时安装了4.x但是文档看的是3.x导致控制台一直报错，排查了好长时间，最后发现是版本的问题。
2、默认选中项的写法不一致3.x用default-index4.x使用v-model绑定

3.x写法

<van-field
  v-model="value"
  is-link
  readonly
  label="城市"
  placeholder="选择城市"
  @click="showPicker = true"
  :default-index="2" 
/>
<van-popup v-model:show="showPicker" round position="bottom">
  <van-picker
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华'];
    const result = ref('');
    const showPicker = ref(false);

    const onConfirm = (value) => {
      result.value = value;
      showPicker.value = false;
    };

    return {
      result,
      columns,
      onConfirm,
      showPicker,
    };
  },
};

4.x写法

<van-field
  v-model="fieldValue"
  is-link
  readonly
  label="城市"
  placeholder="选择城市"
  @click="showPicker = true"
/>
<van-popup v-model:show="showPicker" round position="bottom">
  <van-picker
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const columns = [
      { text: '杭州', value: 'Hangzhou' },
      { text: '宁波', value: 'Ningbo' },
    ];
    const fieldValue = ref('');
    const showPicker = ref(false);

    const onConfirm = ({ selectedOptions }) => {
      showPicker.value = false;
      fieldValue.value = selectedOptions[0].text;
    };

    return {
      columns,
      onConfirm,
      fieldValue,
      showPicker,
    };
  },
};