级联查看

vue 实现级联查看

页面代码如下：

<div class="choice-box">
      <div class="cascader">
        <ul>
          <li v-for="(item,index) in options" :key="index" v-bind="item" @click="open1(item)">{{ item.value }}
            <Icon type="right" :style="{ margin:'3px 0 0'}" /></li>
        </ul>
        <ul v-if="list || list !=''">
          <li v-for="(item1,index1) in list" :key="index1" v-bind="item1" @click="open2(item1)">{{ item1.value }}
            <Icon type="right" :style="{ margin:'3px 0 0'}" /></li>
        </ul>
        <ul v-if="Arr || Arr !=''">
          <li v-for="(item2,index2) in Arr" :key="index2" class="address">地址：{{ item2.value }}</li>
        </ul>
      </div>
    </div>

样式（css）代码如下：

.choice-box{
    padding: 5px 5px;
    margin:-330px 0 0 20px;
    z-index:1;
    position: absolute;
    width: 422px;
    background: #ffffff;
    box-shadow: 0px 0px 4px 0px rgba(51,51,51,0.15);
    .cascader{
        width: 100%;
        display: grid;
        grid-template-columns:25% 25% 45%;
        overflow: hidden;/*超出部分隐藏*/
        white-space: nowrap;/*不换行*/
        text-overflow:ellipsis;/*超出部分文字以...显示*/
        li{
            display: flex;
            justify-content: space-between;
            padding: 9px 5px;
            font-size: 12px;
            font-family: Source Han Sans CN, Source Han Sans CN-Medium;
            font-weight: 500;
            text-align: LEFT;
            color: #909399;
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
          }
      }
}

做了点击事件，一级一级的传id事件的递进。

效果图如下：