使用vant-Picker 編輯聯動自定義時間組件（使用setColumnValue賦值）

最近要使用小程序做一個簡歷編輯的功能，其中有一個組件爲到期時間的選擇框，本來想用直接用van-datetime-picker的組件。可是他們說不行，在選項中一定要加上至今，查來查去van-datetime-picker 加不上，那能怎麼辦？？！！只能自己寫咯。

要實現的功能

1.可以選擇年月
2.選項年可以選擇至今，當年選擇至今時，月份選項爲空
3.選擇近30年
4.選擇當前年時，月份選項需要小於等於當前月

最後實現效果如下

代碼

<van-popup show="{{  endTimeShow}}" bind:close="closeEndTime" position="bottom">
  <van-picker id="timeLast" columns="{{ columns }}" show-toolbar bind:confirm="chooseEndTime" bind:cancel="closeEndTime" bind:change="onChange" />
</van-popup>

//在onload 的時候初始化 columns
      initLastData() {
        let myDate = new Date()
        let data = {
          year: myDate.getFullYear(),
          month: myDate.getMonth() + 1,
          date: myDate.getDate()
        }
        let options1 = [{text: '至今', value: '-1'}], options2 = [];
        //初始化近30年
        for (let i = data.year; i > data.year - 31; i--) {
          options1.push({
            text: i,
            value: i
          })
        }
        //當前年 ,限制月份小於等於當前月
        for (let j = 1; j <= data.month; j++) {
          options2.push({
            text: '0' + j,
            value: j
          })
        }
        // 初始化12個月
        let dataFull = []
        for (let z = 1; z <= 12; z++) {
          dataFull.push({
            text: z < 10 ? '0' + z : '' + z,
            value: z < 10 ? '0' + z : '' + z
          })
        }
        //回填 ，如果是至今，則月份選項爲空，
        if (this.data.form.endTime != '至今') {
          let arr = this.data.form.endTime.split('-')
          //如果非當年前，選項爲12個月
          this.setData({columns: [{values: options1},{values: arr[0] < data.year ? dataFull : options2}]})
        } else {
          this.setData({columns: [{values: options1}, {values: []}]})
        }
      },

// 當年的選項選項變化的時候
 onChange(event) {
        const {
          picker,
          value,
          index
        } = event.detail
        //此塊代碼可以封裝，爲了比較好的展示，我這邊的放了全部的代碼
        let myDate = new Date()
        let year = myDate.getFullYear()
        let month = myDate.getMonth() + 1
        let data = [],
          options2 = []
        for (let z = 1; z <= 12; z++) {
          data.push({
            text: z < 10 ? '0' + z : z,
            value: z
          })
        }
        for (let j = 1; j <= month; j++) {
          options2.push({
            text: '0' + j,
            value: j
          })
        }
        //如果選項變成至今，則月份選項爲空
        if (value[0].value == '-1') {
          picker.setColumnValues(1, [])
          return
        }
        //如果年選項小於當前年，則顯示12個月
        if (value[0].value < year) {
          picker.setColumnValues(1, data)
        } else {
          picker.setColumnValues(1, options2)
        }
      },

 showEndTime() {
        this.setData({
          endTimeShow: true
        })
        this.timeInit()
      },
// 回填組件顯示時顯示的值  
      timeInit() {
        let myDate = new Date()
        let data = {
          year: myDate.getFullYear(),
          month: myDate.getMonth() + 1
        }

        let dataFull = [],
          options2 = []
          // 12個月
        for (let z = 1; z <= 12; z++) {
          dataFull.push({
            text: z < 10 ? '0' + z : '' + z,
            value: z < 10 ? '0' + z : '' + z
          })
        }
        //小於當前月的選項
        for (let j = 1; j <= data.month; j++) {
          options2.push({
            text: '0' + j,
            value: j
          })
        }
        //獲取組件
        let timeLast = this.selectComponent('#timeLast')
        if (this.data.form.endTime != '至今') {
          let arr = this.data.form.endTime.split('-')
          timeLast.setColumnValue(0, Number(arr[0]))
          if (arr[0] < data.year) {
       //回填月份的選項
            timeLast.setColumnValues(1, dataFull)
          } else {
            timeLast.setColumnValues(1, options2)
          }
          ///回填選中的值
          timeLast.setColumnValue(1, arr[1])
        } else {
          timeLast.setColumnIndex(0, 0)
          timeLast.setColumnValues(1, [])
        }
      },