最近做项目，需求是选择年、月就可以，不需要选择到日，所以手动写了一个年月picker选择器。

先上效果图

picker.png

html

{{arrDate[0][dateIndex]}}-{{arrDate[1][dateIndexOne]}}

vue代码

变量定义

data() {

return {

onKeyword:'',

arrDate:[['2019','2018'],['全部','01','02','03','04','05','06','07','08','09','10','11','12']],

dateIndex:0,

dateIndexOne:0,

}

},

调用函数

onLoad() {

// 统计年份范围

this.getYearRange(2018);

},

获取从指定年份开始，年份数组

getYearRange:function(start){

const date = new Date();

let current_year = date.getFullYear();

var year=[];

for(start;start<=current_year;start++){

year.push(start);

}

// console.log(year);

this.arrDate[0]=year;

},

bindDateChange: function(e) {

// console.log(e.detail.value)

this.dateIndex=e.detail.value[0];

this.dateIndexOne=e.detail.value[1];

// console.log(this.dateIndex,this.dateIndexOne)

},

样式

.picker-date{

float: right;

padding: 0 5px;

width: 35%;

height: 30px;

line-height: 30px;

background-color: #F7F7F7;

border-radius: 5px;

color: #C9C9C9;

}

至此，自定义二级picker就做好啦，也可根据需求更改选择内容