快捷導(dǎo)航

vue實(shí)現(xiàn)下拉菜單樹

更新時(shí)間：2020年10月22日 09:54:20 作者：?jiǎn)物w吧

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉菜單樹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)下拉菜單樹的具體代碼，供大家參考，具體內(nèi)容如下

效果：使用 Vue-Treeselect 實(shí)現(xiàn)

建議通過(guò)npm安裝vue-treeselect，并使用webpack之類的捆綁器來(lái)構(gòu)建您的應(yīng)用程序。

npm install --save @riophae/vue-treeselect

官網(wǎng)實(shí)例配置屬性請(qǐng)查看官網(wǎng)

<!-- 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>

更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue自定義加載指令最新詳解
這篇文章主要介紹了vue自定義加載指令的相關(guān)知識(shí)，主要包括創(chuàng)建加載組件，創(chuàng)建指令的方法，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2022-06-06
教你使用vue-cli快速構(gòu)建的小說(shuō)閱讀器
這篇文章主要介紹了vue-cli構(gòu)建的小說(shuō)閱讀器，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
Vue項(xiàng)目如何關(guān)閉語(yǔ)法檢查
這篇文章主要介紹了Vue項(xiàng)目如何關(guān)閉語(yǔ)法檢查問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因?yàn)?.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開(kāi)箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下
2023-12-12
vue項(xiàng)目啟動(dòng)出現(xiàn)cannot GET /服務(wù)錯(cuò)誤的解決方法
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)出現(xiàn)cannot GET /服務(wù)錯(cuò)誤的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
Vue基礎(chǔ)popover彈出框編寫及bug問(wèn)題分析
這篇文章主要為大家介紹了Vue基礎(chǔ)popover彈出框編寫及bug問(wèn)題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue3.0安裝Element?ui及矢量圖使用方式
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
用了這么久的Vue3你真的了解Proxy了嗎
Proxy是ES6引入的一個(gè)新特性，它允許你創(chuàng)建一個(gè)代理對(duì)象，用于攔截對(duì)目標(biāo)對(duì)象的訪問(wèn)，但用了這么久的vue3，你真的懂Proxy嗎，本文就來(lái)和大家深入聊聊Proxy吧
2023-06-06
解決vue里碰到 $refs 的問(wèn)題的方法
本篇文章主要介紹了解決vue里碰到 $refs 的問(wèn)題的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
Vue文件下載進(jìn)度條的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了Vue文件下載進(jìn)度條的實(shí)現(xiàn)原理,通過(guò)使用onDownloadProgress方法API獲取進(jìn)度及文件大小等數(shù)據(jù)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-07-07