vant picker+popup 自定义三级联动案例

picker选择器的数据由columns属性控制，columns中有几个元素就代表该选择器有多少级，通过change方法来给对应列赋值。

columns = [{
    values: column1, // 对应列的值
    defaultIndex: 0, // 默认选中项索引
    className: 'class1' // 对应列的类名 
  },
  {
    values: [],
    defaultIndex: 0,
    className: 'class2'
  },
  {
    values: [],
    defaultIndex: 0,
    className: 'class3'
  }
];

demo

.text {
  text-align: right;
}

补充知识：vue vant-picker选择器的使用，及数据结构的写法

vant-picker组件columns属性接收的是一个数组，如官方例子中：

它的数组是子项是一个简单是字符，但通常我们真实的数据子项都是对象，如：

colums:[ {name:'张三',age:18},{name:'李四',age:28}]

那么像这样的数组该怎么显示呢， vant-picker的value-key属性就是解决这个问题的，如我要使用上面的数组，那么vant-picker

就是这样

另外，如果数组中的子项含有键名为'text',那么value-key也可以不用设置，组件会默认取这个键名，如colums:[ {text:'张三',age:18},{text:'李四',age:28}]

以上这篇vant picker+popup 自定义三级联动案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。