vueでは、vant TreeSelectを使ってコンポーネントを分類して選択して操作します。

日本語文書：Tree Select分類選択
効果の展示:

 //           ，       ,       
 import { Popup } from "vant";
 import { TreeSelect } from "vant";

コード部分:

 <van-popup v-model="policeShow" position="top" :overlay="true">
  <van-tree-select
  :items="items"
  :active-id.sync="items.activeId"
  :main-active-index.sync="items.activeId"
  @click-nav="onNavClick" 
  >
  <template slot="content" >
   <ul class="right-content">
   <li v-for="(item,index) in policeList" :key="index"  :class="{active:policeCode==item.policeCode}" @click="onItemClick(item.policeName,item.policeCode)"> {{item.policeName}} </li>
   </ul>
  </template>
  </van-tree-select>
  <div class="btn" @click="onPoliceClick">  </div>
 </van-popup>

今は私の業務ロジックを解析します。
1.まず、itemsは、行列です。左側のデータを示すために、配列を送る必要があります。

//            ,        items   ，            ，          ，         ，  items  key   text，       ， picker     value-key    ，            
{
 "code": 200,
 "message": "success",
 "data": [
  {
   "substationCode": "1101010000",
   "substationName": "     "
  },
  {
   "substationCode": "100002",
   "substationName": "     "
  },
  {
   "substationCode": "100003",
   "substationName": "     "
  },
  {
   "substationCode": "100001003",
   "substationName": "     "
  },
  {
   "substationCode": "1010101",
   "substationName": "     "
  },
  {
   "substationCode": "1010101\t",
   "substationName": "111"
  },
  {
   "substationCode": "1000021",
   "substationName": "      "
  },
  {
   "substationCode": "12223",
   "substationName": "    "
  }
 ]
}
  this.items.push({
    activeId:substationCode,
    text:substationName
  })

2.左側のデータに基づいて右側のデータをレンダリングします。（右側のデータはカスタムですので、自分でイベントを加えればいいです。）

 @click-nav        
 onNavClick(index) {
  console.log(index) 
  let substationCode = this.items[index].activeId //      index         
  this.requestPoliceList(substationCode) //             activeId   。
 },

まとめ:
1.左側をレンダリングし、バックグラウンドからあなたへの値pushをitemsの中に入れます。（textしか使えないので注意してください。）
2.@click-navで現在のindexを取得し、idを取得する
3.右側のデータをidでレンダリングする
補足知識：vue-treeselectのカスタム部分説明と使用心得
vueには様々なフレームがあります。vue-treeselectはvueの木の選択です。vueベースの多選択コンポーネントです。
通常の状況では、Vue-treeselectを再度パッケージ化して自分の業務に便利を提供します。
もちろんその機能はたくさんあります。例えば、単一選択、複数選択、あいまい検索、クリアなどです。
無駄話は言わないでコードを見てください。

一つずつ説明しましょう。
まず木の名前をつけてください。コンポーネントが呼出される時に呼び出すべきです。つまり、nameです。
後は透伝のパラメータとデータ配置のpropsコンポーネントは間違いなく子です。propsの中のものは全部父のレベルから伝わってきます。
templateは私が必要とするvue-treeselectのコンポーネントテンプレートです。
dataは私のサブコンポーネントのデータパラメータです。
もちろんこのTgEl TreeSelectには、methods、vueのライフサイクル、計算属性、リスニングマシンなども入れられます。
プロの中の透伝のパラメーター

propsにはデータvalue、つまり初期化のデータがあります。dataListはあなたのインターフェースデータです。次はあなたが選択した後にレンダリングされた属性とアップロードの属性です。つまり、まっすぐに言えば、ドロップダウン中のlabelとvalueはもちろん上に対応しているのは私のlabel FieldとselectFieldです。その後の属性はツリーの折りたたみ属性です。
default ExpandLevelはどのレベルから来た時に折りたたみますか？
defaultExpandAllは全部展開しますか？それとも折り畳みます。
マルチプルかどうか
disabledこれは選択可能と不選択です。
validateEvent検証必須と不要の属性
clearableにはクリアした属性がありますか？
もちろん私も私の完全なコードを貼り付けます。



もちろん説明します。ここでrequirejsを使ってdefineの属性つまりAMDを通してこのコンポーネントを再度封入します。最初のページはnpmでvue-treeselectをインストールします。
npm install--save@riophae/vue-treeselect
Vue.com onent('treeselect'，Vue Treeselect.Treeselect)
上のこのコードはダウンロードしてからtreeselectを導入します。
もちろん、公式サイトでの詳細は公式サイトをご覧になってから検討してください。
以上の本はVueでvant TreeSelectを使ってコンポーネントを分類して操作します。つまり、小編が皆さんに共有している内容の全部です。参考にしてもらいたいです。どうぞよろしくお願いします。