用Vue + iview 写一个级联选择

iview的级联选择是这样的，要是想要实现那我的数据格式应该也要跟这个差不多。把所有的例子都看了一遍也没发现有多选的，也没有可实现的属性或者方法。他都封装好了也改不了他的方法，改了半天我放弃了。

首先嘛去搜了一波看看大家都用的什么写的，看了一圈没有完全满足我的需求的（应该是有的，只是我看的都是开源的），但是给了思路。
这是最终的样子。

我需求的时间范围是2020年至今，可按月份查询或者按季度查询，月份和季度不可同时选择，选择月份后可选择具体月份，季度类似。最终的需求还是改成了单选的，但是我懒的换iview组件了，就还用的自己写的，毕竟哪天甲方说要改成多选时也方便改。新建一个组件，我懒得想名字就直接用的cascader，代码如下。

<template>
    <div class="cascader" >
        <div class="text">
          <Input @on-focus="options1Show" v-model="displayValue" style="width: 160px">
            <Icon v-show="show1" type="ios-arrow-down" slot="suffix"/>
            <Icon v-show="!show1" type="ios-arrow-up" slot="suffix"/>
          </Input>
        </div>
        <div style="width: 400px;height: 200px;position: absolute" @mouseleave="out">
          <div id="scrollbar1" class="options1" v-show="show1">
            <ul>
              <li :class="{active:active==index}" @click="selectYear(option.value,index)" v-for="(option,index) in timeList" :key="index">{
   {
   option.label}}
                <Icon style="float: right;margin-top: 9px;margin-right: 4px" type="ios-arrow-forward" />
              </li>
            </ul>
          </div>
          <div class="options2" v-show="show2">
            <ul >
              <li :class="{selected:selected==index}" v-for="(item,index) in secondOptions" @click="selectType(item.label,item.value,index)" :key="index">{
   {
   item.label}}
                <Icon style="float: right;margin-top: 9px;margin-right: 4px" type="ios-arrow-forward" />
              </li>
            </ul>
          </div>
          <div class="options3" id="scrollbar" v-show="show3">
            <ul >
              <li style="position: relative" :class="{selected2:indexList.indexOf(index)>-1}" v-for="(item,index) in thirdOptions" @click="selectValue(item.label,item.value,index)" :key="index">{
   {
   item.label}}
                <Icon v-if="indexList.indexOf(index)>-1" style="position: absolute;margin-left: 16px;margin-top: 9px" size="12" type="md-checkmark" />
              </li>
            </ul>
          </div>
        </div>
      </div>
</template>

<script>
    export default {
   
        name: "cascader",
      data