关于javascript:vuevant移动端地区级联选择组件

写在结尾：我的项目的框架是 vue+vant，业务需要一个级联的地区抉择，写完才发现 vant 自身也有这组件 …. 起初看 vant 自身用的逻辑跟我不太一样，感觉还有点思考价值那就发上来当做实现记录吧~

总体思路（select 与 tabs 独立）：

1. 列表抉择（select）
   1）获取以后 tabs 的长度 -> 设置以后 active 的 name
   2）通过 levelCollect（最终抉择的数据集）设置每个层级，例：[‘ 第一层数据 ’,’ 第二层数据 ’,’ 第三层数据 ’,…]
   3）删除后级数据，更新 tabs 长度
   4）如果有上级，新增 active 并选中，如果没有设置实现
2. tab 抉择（tabsClick）
   1）拷贝一次原始数据，设置列表筛选数据：0 级应用原始数据，其它选用存储数据设置高亮
   2）滚动到选中

目前性能反对：
·自定义数据
·N 级数据联动
·下级数据抉择后批改
·选择项高亮
todo：
数据回填

效果图：

addressCard.vue

<template>
  <div class="addressWrapper">
    <h4> 请抉择所在地区 </h4>
    <div class="tabs">
        <van-tabs ref='tabs' v-model="active" scrollspy :ellipsis='false' @click='tabsClick' >
            <van-tab v-for="(tabItem,i) in tabsData" :title="tabItem.name" :key='i'>.</van-tab>
        </van-tabs>
        <div class="content">
            <div :class="['item',{select:item.select}]" v-for="(item,j) in areaJson" :key='j' @click='select(item)'>
                
                {{item.name}}
            </div>
        </div>
        
    </div>
  </div>
</template>

<script>
import {Tab,Tabs} from 'vant';
import areaJson from './areaJson/pcas-code.json'
export default {
  components: {[Tab.name]: Tab,
    [Tabs.name]:Tabs
  },
  data(){
      return{
          active:1,
          levelCollect:[],
          originArea:areaJson,
          areaJson,
          tabsData:[{name:'请抉择'}]
      }
  },
  created(){},
  methods:{select(item){
          
          // 获取以后 tabs 的长度
          let len = this.tabsData.length
          // 设置以后 active 的 name
          this.tabsData[this.active].name = item.name
         
          // 设置每个层级
          this.levelCollect[this.active] = item
         
          if(this.active<len){
              // 删除后部的城镇
              this.tabsData.splice(this.active+1)
              // 更新 tabs 长度
              len = this.tabsData.length
          }
          // 如果有上级，新增 active 并选中
          if(item.children){this.tabsData.push({name:'请抉择'})
              // this.active = len
              this.$refs.tabs.scrollTo(len)
              this.areaJson = item.children
          }else{this.tabsClick(this.active,item.name)
          }
          
          
          
      },
      tabsClick(name,title){
          // 设置列表筛选数据：0 级应用原始数据，其它选用存储数据设置高亮
          if(name===0){this.areaJson = this.originArea.slice().map(item=>{
                  return {
                      ...item,
                      select:item.name===title
                  }
              })
          }else{this.areaJson = this.levelCollect[name-1].children.map(item=>{
                  return {
                      ...item,
                      select:item.name===title
                  }
              })
          }
          // 滚动到选中
          this.$nextTick(()=>{let doc = document.querySelector('.select')
              doc&&doc.scrollIntoView();})
          
      }
  }
};
</script>

<style lang="less" scoped>
.addressWrapper {
  padding:20px 10px;
  h4{text-align:center;}
  .tabs{
    margin-top:20px;
    /deep/.van-tabs__content{display: none;}
    .content{
        margin-top:20px;
        height: 200px;
        overflow: scroll;
        .item{
            line-height:40px;
            font-size:14px;
            &.select{color:red;}
        }
    }
    
  }
}
</style>

附上本文中地区 pcas-code.json 数据：
https://github.com/modood/Administrative-divisions-of-China/blob/master/dist/pcas-code.json