Question

import { Picker } from 'feui';
let years = [];
for (var i = 2000; i <= 2030; i++) {
  years.push({
    name: i + "年",
    value: i + ""
  });
}

components: {
  [Picker.name]: Picker,
},
data() {
  return {
    years: [years],
    years1: [years, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]],
  };
}
methods: {
  change(value) {
    console.log("new Value", value);
  },
}

代码演示

默认

<divider>默认，不设置默认值时选中第一个 {{year1}}</divider>
<fe-picker :data='years' v-model='year1' 
  @on-change='change'>
</fe-picker>

双向绑定

<divider>双向绑定</divider>
<fe-picker :data='years' v-model='year3' 
  @on-change='change3'>
</fe-picker>
<select v-model='year5'>
  <option v-for='one in years[0]' :value='one.value'
   :key='one.index'>{{one.name}}</option>
</select>

非联动多列

<divider>非联动多列</divider>
<fe-picker :data='years1' v-model='year4'
  @on-change='change'>
</fe-picker>

非联动多列

<divider>3列的数据，只显示两列</divider>
<fe-picker :data='year7' :fixed-columns="2" :columns=3 
  v-model='year8Value' @on-change='change'>
</fe-picker>

API

参数	说明	类型	默认值	可选值
value	表单值，使用 v-model 绑定	Array	-	-
data	选项列表数据	Number	-	-
columns	指定联动模式下的列数，当不指定时表示非联动	Number	-	-
fixed-columns	指定显示多少列，隐藏多余的	Array	-	-
column-width	定义每一列宽度，只需要定义除最后一列宽度，最后一列自动宽度， 比如对于3列选择，可以这样：[1/2, 1/5]	Array	-	-
-	-	-	-	-

Events

事件名	参数	说明	备注
on-change	value	选择值变化时触发	-
-	-	-	-

Methods

方法名	参数	说明	备注
getNameValues	-	根据value获取字面值	-
-	-	-	-