드 롭 다운 메뉴 트 리 구현

본 논문 의 사례 는 vue 가 드 롭 다운 메뉴 트 리 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과:Vue-Treeselect 로 구현

npm 를 통 해 vue-treeselect 를 설치 하고 웹 팩 과 같은 묶음 기 를 사용 하여 프로그램 을 구축 하 는 것 을 권장 합 니 다.

npm install --save @riophae/vue-treeselect
홈 페이지 인 스 턴 스 설정 속성 보기홈 페이지

<!-- Vue SFC -->
<template>
 <div id="app">
 <treeselect v-model="value" :multiple="true" :options="options" />
 </div>
</template>

<script>
 // import the component
 import Treeselect from '@riophae/vue-treeselect'
 // import the styles
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'

 export default {
 // register the component
 components: { Treeselect },
 data() {
  return {
  // define the default value
  value: null,
  // define options
  options: [ {
   id: 'a',
   label: 'a',
   children: [ {
   id: 'aa',
   label: 'aa',
   }, {
   id: 'ab',
   label: 'ab',
   } ],
  }, {
   id: 'b',
   label: 'b',
  }, {
   id: 'c',
   label: 'c',
  } ],
  }

 },
 }
</script>
더 많은 튜 토리 얼 은'Vue.js 전단 구성 요소 학습 튜 토리 얼'을 클릭 하여 읽 기 를 배 우 는 것 을 환영 합 니 다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기