vant3中使用prick

Question

vant中的prick用colunmsFieldNames报错，用value-key报警告。怎么办？求解

Answer 1

在使用 picker 组件时，columnsFieldNames 和 value-key 属性是用于指定数据格式的，前者用于指定列表中每一列的数据来源，后者用于指定选中值的唯一标识符。如果使用错误会导致警告或报错。

如果你的数据格式不符合 columnsFieldNames 和 value-key 的要求，可以使用 formatColumn 方法自定义数据格式。

举个例子，假设你有如下数据格式：

[
  {
    name: '张三',
    age: 20,
    city: '北京'
  },
  {
    name: '李四',
    age: 22,
    city: '上海'
  }
]

如果你想用 picker 显示这些数据，你可以按照如下方式配置 picker：

<van-picker
  :columns-field-names="{ text: 'name', value: 'age' }"
  :value-key="'city'"
  :columns="columns"
></van-picker>

但是由于数据格式的不同，这种方式可能会出现警告或报错。此时你可以通过自定义 formatColumn 方法来解决问题，示例代码如下：

<van-picker
  :columns="columns"
  :format-column="formatColumn"
></van-picker>

export default {
  data() {
    return {
      options: [
        { name: '张三', age: 20, city: '北京' },
        { name: '李四', age: 22, city: '上海' }
      ],
      columns: [
        { values: ['北京', '上海'], defaultIndex: 0 },
        { values: [20, 22], defaultIndex: 0 },
        { values: ['张三', '李四'], defaultIndex: 0 }
      ]
    };
  },
  methods: {
    formatColumn(column, index) {
      const { options } = this;
      const { values } = column;
      const { text, value } = options.reduce(
        (acc, cur) => {
          acc.text.push(cur.name);
          acc.value.push(cur.age);
          return acc;
        },
        { text: [], value: [] }
      );
      column.values = values;
      column.defaultIndex = 0;
      return column;
    }
  }
};

在这个例子中，我们通过 formatColumn 方法自定义了列的数据格式。具体实现过程是将每一列的 values 设置为对应的数据，text 设置为显示的文本，defaultIndex 设置为默认选中项的索引。