vue 에서 vant TreeSelect 분 류 를 사용 하여 구성 요 소 를 선택 합 니 다.

중국어 문서:TreeSelect 분류 선택
효과 표시:

 //           ，       ,       
 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 는 내 하위 구성 요소 의 데이터 매개 변수 입 니 다.
물론 이 TgElTreeSelect 에 서 는 methods,vue 의 수명 주기,계산 속성,디텍터 등 을 넣 을 수 있 습 니 다.
props 의 투과 매개 변수

props 안에 데이터 value,즉 초기 화 된 데이터 가 있 습 니 다.dataList 는 바로 당신 의 인터페이스 데이터 입 니 다.다음은 당신 이 선택 한 후에 보 여 주 는 속성 과 업로드 하 는 속성 입 니 다.솔직히 말하자면 드 롭 다운 중의 label 과 value 입 니 다.물론 위 에 대응 하 는 것 은 제 labelField 와 selectField 입 니 다.그 다음 속성 은 트 리 접 기 속성 입 니 다.
defaultExpandLevel 은 어느 단계 에서 왔 을 때 접 고 펼 치 는 것 입 니 다.
defaultExpandAll 은 모두 펼 치 거나 접 는 것 입 니 다.
multiple 다 중 선택 여부
disabled.이게 선택 가능 과 선택 불가 입 니 다.
vaidate 이벤트 검증 필수 와 불필요 한 속성
clearable 삭제 속성 이 있 는 지 여부
물론 나 도 나의 완전한 코드 를 붙 였 다.



물론 설명 을 드 리 겠 습 니 다.여기 서 저 는 requirejs 를 사용 하여 define 의 속성,즉 AMD 를 통 해 이 구성 요 소 를 다시 밀봉 합 니 다.첫 페이지 는 npm 에 vue-treeselect 를 설치 합 니 다.
npm install --save @riophae/vue-treeselect
Vue.component('treeselect', VueTreeselect.Treeselect)
위의 이 코드 는 다운로드 가 끝나 면 treeselect 를 도입 하 는 것 입 니 다.
물론 홈 페이지 의 보다 전면적 이 고 상세 한 것 은 홈 페이지 의 재 연 구 를 볼 수 있다.
이 편 은 vue 에서 vant TreeSelect 분 류 를 사용 하여 구성 요 소 를 선택 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.